路由守卫简介
- 作用：用于对路由进行权限控制
- 分类：全局守卫(前置路由守卫 + 后置路由守卫)、独享守卫、组件内守卫
全局--前置路由守卫 + 后置守卫
示例
1 import Vue from 'vue'
2 import VueRouter from 'vue-router'
3 import Home from '../views/Home.vue'
4 import About from '../views/About.vue'
5 import News from '@/views/home/News.vue'
6 import Message from '@/views/home/Message.vue'
7 import Detail from '@/views/home/Detail.vue'
8
9 //Vue中使用router插件
10 Vue.use(VueRouter)
11
12 // 新建路由实例
13 //路由配置，配置路由路径与组件的对应关系
14 const router = new VueRouter({
15 routes: [
16 {
17 path: '/home',
18 name: 'Home',
19 meta: { title: '首页' },
20 // 路由元数据
21 component: () => import('../views/Home.vue'),
22 children: [
23 {
24 // 路由元数据
25 meta: { isAuth: true, title: '新闻' },
26 path: '/home/news',//path最左侧/代表根路径
27 name: 'News',
28 component: News
29 },
30 {
31 // 路由元数据
32 meta: { isAuth: true, title: '消息' },
33 path: 'Message',//这里没有用/ 表示相对路径
34 component: Message,
35 name: 'Message',
36 children: [
37 {
38 name: 'detail',
39 meta: { title: '详情' },
40 path: '/home/detail/:id/:title',//path最左侧/代表根路径
41 component: Detail,
42
43 // props写法一：值为对象，该对象中的所有key-value都会以props的形式传给Detail组件
44 // props: {a:1,b:'你好'} //不常用,传固定值
45
46 // props写法二：值为bool，若值为真--就会把该路由组件收到的说有params(不能接受到query参数)参数以props的形式传给Detail组件
47 // props: true
48
49 // props写法三：值为函数
50 props ($route) {
51 // return { id: $route.query.id, title: $route.query.title }
52 return { id: $route.params.id, title: $route.params.title }
53 }
54
55 // props ({ query }) { //结构赋值
56 // props ({ params }) {
57 // // return { id: $route.query.id, title: $route.query.title }
58 // return { id: params.id, title: params.title }
59 // }
60
61 // 结构赋值连续写法
62 // props ({ params: { id, title } }) {
63 // // return { id: $route.query.id, title: $route.query.title }
64 // return { id, title }
65 // }
66
67 },
68 ]
69 },
70 {
71 // 路由元数据
72 meta: { isAuth: true, title: '新闻' },
73 path: '',
74 name: 'News',
75 redirect: '/home/News'
76 }
77 ]
78 },
79 {
80 path: '/about',
81 name: 'About',
82 meta: { title: '关于' },
83 component: () => import('../views/About.vue'),
84 },
85 {//根路由--默认
86 path: '/',
87 name: 'Home',
88 meta: { title: '首页' },
89 redirect: '/home'
90 }
91 ]
92 })
93
94 /*
95 全局(前置路由守卫)
96 初始化时被调用 + 每次路由切换之前
97 */
98 router.beforeEach((to, from, next) => {
99 console.log('全局前置路由守卫 to name==>', to, from)
100
101 if (to.meta.isAuth) {//判断是否需要鉴权
102 // if (to.name === 'Home' || to.name === 'About' || to.name === 'News') {
103 if (to.name === 'News') {
104 // document.title = to.meta.title || '欢迎来到首页'
105 next()//放行
106 }
107 else {
108 // document.title = to.meta.title || '欢迎来到首页'
109 alert('你没有操作权限')
110 }
111 }
112 })
113
114 /*
115 全局后置路由守卫
116 初始化的时候被调用，每次路由切换之后调用
117 */
118 router.afterEach((to, from) => {
119 console.log('全局后置路由守卫 to name==>', to, from)
120 document.title = to.meta.title || '欢迎来到首页'
121 })
122
123 //导出路由实例，在main.js中导入使用
124 export default router
独享守卫
注：独享路由守卫，可以和全局路由守卫(前置、后置)组合使用，需结合实际情况自行处理......
示例：
1 import Vue from 'vue'
2 import VueRouter from 'vue-router'
3 import Home from '../views/Home.vue'
4 import About from '../views/About.vue'
5 import News from '@/views/home/News.vue'
6 import Message from '@/views/home/Message.vue'
7 import Detail from '@/views/home/Detail.vue'
8
9 //Vue中使用router插件
10 Vue.use(VueRouter)
11
12 // 新建路由实例
13 //路由配置，配置路由路径与组件的对应关系
14 const router = new VueRouter({
15 routes: [
16 {
17 path: '/home',
18 name: 'Home',
19 meta: { title: '首页' },
20 // 路由元数据
21 component: () => import('../views/Home.vue'),
22 children: [
23 {
24 // 路由元数据
25 meta: { isAuth: true, title: '新闻' },
26 path: '/home/news',//path最左侧/代表根路径
27 name: 'News',
28 component: News
29 },
30 {
31 // 路由元数据
32 meta: { isAuth: true, title: '消息' },
33 path: 'Message',//这里没有用/ 表示相对路径
34 component: Message,
35 name: 'Message',
36 children: [
37 {
38 name: 'detail',
39 meta: { title: '详情' },
40 path: '/home/detail/:id/:title',//path最左侧/代表根路径
41 component: Detail,
42
43 // props写法一：值为对象，该对象中的所有key-value都会以props的形式传给Detail组件
44 // props: {a:1,b:'你好'} //不常用,传固定值
45
46 // props写法二：值为bool，若值为真--就会把该路由组件收到的说有params(不能接受到query参数)参数以props的形式传给Detail组件
47 // props: true
48
49 // props写法三：值为函数
50 props ($route) {
51 // return { id: $route.query.id, title: $route.query.title }
52 return { id: $route.params.id, title: $route.params.title }
53 }
54
55 // props ({ query }) { //结构赋值
56 // props ({ params }) {
57 // // return { id: $route.query.id, title: $route.query.title }
58 // return { id: params.id, title: params.title }
59 // }
60
61 // 结构赋值连续写法
62 // props ({ params: { id, title } }) {
63 // // return { id: $route.query.id, title: $route.query.title }
64 // return { id, title }
65 // }
66
67 },
68 ]
69 },
70 {
71 // 路由元数据
72 meta: { isAuth: true, title: '新闻' },
73 path: '',
74 name: 'News',
75 redirect: '/home/News'
76 }
77 ]
78 },
79 {
80 path: '/about',
81 name: 'About',
82 meta: { title: '关于' },
83 component: () => import('../views/About.vue'),
84
85 // 独享路由守卫
86 beforeEnter: ((to, from, next) => {
87 console.log('独享路由守卫 to name==>', to, from)
88 if (to.meta.isAuth) {//判断是否需要鉴权
89 if (to.name === 'About') {
90 next()//放行
91 }
92 else {
93 alert('你没有操作权限')
94 }
95 }
96 }),
97 },
98 {//根路由--默认
99 path: '/',
100 name: 'Home',
101 meta: { title: '首页' },
102 redirect: '/home'
103 }
104 ]
105 })
106
107 /*
108 全局后置路由守卫
109 初始化的时候被调用，每次路由切换之后调用
110 */
111 router.afterEach((to, from) => {
112 console.log('全局后置路由守卫 to name==>', to, from)
113 document.title = to.meta.title || '欢迎来到首页'
114 })
115 //导出路由实例，在main.js中导入使用
116 export default router
组件内守卫
标签：Vue,name,title,守卫,meta,props,id,路由 From： https://www.cnblogs.com/YYkun/p/18108546