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 示例 模板 脚手架 整合 插件/指 ...
随机推荐
- Redis.之.环境搭建(集群)
Redis.之.环境搭建(集群) 现有环境: /u01/app/ |- redis # 单机版 |- redis-3.2.12 # redis源件 所需软件:redis-3.0.0.gem -- ...
- js左右大小变化
点左边左边变大.点右边右边大左边小 <style type="text/css"> *{ margin:0px auto; padding:0px; } #wai{ w ...
- mysql添加用户,授权,刷新权限
创建用户 CREATE USER 'test'@'localhost' IDENTIFIED BY '123456'; 赋权 GRANT ALL PRIVILEGES ON *.* TO 'test' ...
- HTML表单简单练习
代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
- echarts起始角度
series : [ { type: 'pie', startAngle: 180,// minAngle:5,// radius : ['0','60%'], center: ['50%', '50 ...
- deepin 安装scrapy安装出错:fatal error: Python.h 的解决办法
环境deepin Linux 15.7 Python3.6.5 今天重新装了deepin系统,需要重新安装scrapy,直接pip了一下,没成. 报错:fatal error: Python.h: 没 ...
- flutter packages.
connectivity This plugin allows Flutter apps to discover network connectivity and configure themselv ...
- HAproxy指南之haproxy实现动静分离(案例篇)
HAproxy指南之haproxy实现动静分离(案例篇) 转自 https://blog.51cto.com/blief/1751806 实际应用环境中,往往需要根据业务请求将相关不同请求跳转 ...
- RHCSA
系统管理 redhat 7 破解修改root密码 修改系统主机名 修改系统地址掩码网关 创建系统默认软件仓库 安装系统内核升级 绑定到外部验证服务LDAP.配置 autofs 用户组管理 创建用户组 ...
- Bugku-CTF之速度要快
Day21 速度要快 速度要快!!!!!! http://123.206.87.240:8002/web6/