Vue route的使用
1、route.js文件
import Vue from 'vue'
import Router from 'vue-router' Vue.use(Router) const router = new Router({
routes: [
{
path: '/',
name: 'login',
component: () => import('./views/login.vue')
},
{
path: '/schools',
name: 'schools',
component: () => import('./views/schools/main.vue')
},
{
path: '/main/:id',
name: 'main',
component: () => import('./views/report/main.vue'),
redirect: '/main/:id/class',
children: [
{
path: '/main/:id/teacher',
name: 'teacherMain',
component: () => import('./views/teacher/main.vue'),
},
{
path: '/main/:id/teacher/:gradeId/:subjectId',
name: 'teacherMain',
component: () => import('./views/teacher/main.vue'),
},
{
path: '/main/:id/class',
name: 'classMain',
component: () => import('./views/class/main.vue'),
},
]
},
{
path: '**', // 错误路由
redirect: '/login' //重定向
}
]
}) // 全局路由守卫
router.beforeEach((to, from, next) => {
function getCookie(name) {
let arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return decodeURIComponent(arr[2]);
else
return null;
} // to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。 let isLogin = getCookie("localtoken") !== null; // 是否登录 // 未登录状态;当路由到nextRoute指定页时,跳转至login
if (!isLogin && to.name !== 'login') {
router.push({ name: 'login' });
} // 已登录状态;当路由到login时,跳转至home
if (to.name === 'login') {
if (isLogin) {
router.push('/schools');
}
} next();
}); export default router;
2、路由跳转
2.1 页面跳转
<router-link tag="nav" active-class="active" :to="'/main/'+schoolID+'/teacher'">
<a>教师</a>
<i></i>
</router-link>
<router-link tag="nav" active-class="active" :to="'/main/'+schoolID+'/class'">
<a>班</a>
<i></i>
</router-link>
2.2 js方法跳转
this.$router.push('/main/' + this.schoolID + '/teacher'); this.$router.push('/main/' + this.schoolID + '/teacher/' + this.nowGrade + "/" + this.nowSubject);
3、使用路由参数
watch: {
//如果路由发生了变化,更新页面数据
$route(to, from) {
if (to.path !== from.path) {
this.schoolID = this.$route.params.id;
this.gradeId = this.$route.params.gradeId;
this.subjectId = this.$route.params.subjectId;
this.init();
}
}
},
data(){
return {
schoolID: this.$route.params.id,//学校 id
gradeId: this.$route.params.gradeId,
subjectId: this.$route.params.subjectId,
}
},
Vue route的使用的更多相关文章
- 深入浅出的webpack4构建工具--webpack4+vue+route+vuex项目构建(十七)
阅读目录 一:vue传值方式有哪些? 二:理解使用Vuex 三:webpack4+vue+route+vuex 项目架构 回到顶部 一:vue传值方式有哪些? 在vue项目开发过程中,经常会使用组件来 ...
- vue route.go 载入刷新
vue route 重新载入刷新: this.$router.go({path : 'path' , query: { param: this.param} })
- Vue Route Building the UI back-end framework
Vue 的 路由就像ASP.NET MVC路径相似. 路由定义文件也是js格式的,我们都将这些文件放入到src的route文件中. 后台框架主入口: <template> <div ...
- vue route
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue route部分简单高级用法
一改变页面title的值 在开发时常常需要在切换到不同页面时改变浏览器的title值,那么我们就可以在定义路由的时候通过配置 meta 属性 来改变title值. import Vue from ...
- Vue:$route 和 $router 的区别
参考: https://uzshare.com/view/788446 https://router.vuejs.org/zh/ $route 是“路由信息对象”,包括 path,params,has ...
- vue route 跳转
index.js { path: '/grouporder/grouporderdetail/id/:id', name: '/grouporder/grouporderdetail/id/', co ...
- 借助 Vue 来构建单页面应用
原文: https://github.com/MeCKodo/vue-tutorial 主题 Vue.js (1/2)Vue构建单页应用最佳实战 前言 我们将会选择使用一些vue周边的库 1.使用no ...
- Vue.js的库,包,资源的列表大全。
官方资源 外部资源 社区 播客 官方示例 入门 开发工具 语法高亮 代码片段 自动补全 组件集合 库和插件 路由 ajax/数据 状态管理 校验 UI组件 i18n 示例 模板 脚手架 整合 插件/指 ...
随机推荐
- 获取上一行记录lag
SELECT EMPLID ,EFFDT ,END_DT ,COMPANY ,DEPTID ,POSITION_NBR ,' ' ,' ' FROM ( SELECT J1.EMPLID ,J1.EF ...
- 007-li标签CSS水平居中垂直居中
水平居中是text-align:center垂直居中 一般是用 line-height比如你li的高度是80px 那你设置 line-height:80px 文字就垂直居中
- django--如何将数据结果集序列化传给前端页面展示
示例为一对多的表关系,学生为多,老师为一,设置外键字段可以为空,也就是说关联的老师被删除该学生依然存在,只是相应字段留空 class Teacher(models.Model): name = mod ...
- 【转】福利大放送--不止是Android,Github超高影响力开源大放送,学习开发必备教科书
[福利大放送]不止是Android,Github超高影响力开源大放送,学习开发必备教科书 目录 一.写在前面 1.free-programming-books 2.oh-my-zsh 3.awes ...
- window安装pycharm Django
pycharm 安装Pycharm 直接在官网下载就可以,这里说一下如何破解注册码的问题: 修改电脑中hosts文件(地址: C:\Windows\System32\drivers\etc ),改变 ...
- 解决postman环境切换,自动获取api签名时间及签名
postman调试api接口时,常遇到两个问题: 1.环境分为开发环境,测试环境,正式环境,如何只写一个接口,通过切换postman环境来实现不同环境的接口调用? 2. api接口请求时往往会添加,来 ...
- mysql user表root 用户误删除解决方法
1:停止mysql服务2:mysql安装目录下找到my.ini;2:找到以下片段[mysqld]4:另起一行加入并保存skip-grant-tables5:启动mysql服务6:登录mysql(无用户 ...
- 网络-04-端口号-linux端口详解大全--TCP注册端口号大全
# John Murphy <john.m.murphy&mci.com>afs3-fileserver 7000/tcp file server itselfafs3-files ...
- 20175208 实验二 《Java面向对象程序设计》实验报告
一.实验报告封面 课程:Java程序设计 班级:1752班 姓名:张家华 学号:20175208 指导教师:娄嘉鹏 实验日期:2019年4月09日~2019年4月18日 实验序号:实验二 实验 ...
- 跨域请求携带cookie
function ajaxPostRequestCipherMachine(url, param) { var url = url; var dict = { 'ret' : false, 'er ...