Vue学习笔记70--全局前置-路由守卫 + 后置路由守卫 + 独享守卫 + 组件内守卫

路由守卫简介

作用：用于对路由进行权限控制
分类：全局守卫(前置路由守卫 + 后置路由守卫)、独享守卫、组件内守卫

全局--前置路由守卫 + 后置守卫

示例

  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

组件内守卫

组件内守卫：即在组件内部对组件进行的特殊处理操作.......

示例如下所示：

src/router/index.js

 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: '关于', isAuth: true },
83       component: () => import('../views/About.vue'),
84     },
85     {//根路由--默认
86       path: '/',
87       name: 'Home',
88       meta: { title: '首页' },
89       redirect: '/home'
90     }
91   ]
92 })
93 
94 //导出路由实例，在main.js中导入使用
95 export default router

About.vue

 1 <template>
 2   <div>
 3     <h3>about page</h3>
 4   </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9   name: 'About',
10   // 通过路由规则(点击)，进入该组件时被调用
11   beforeRouteEnter (to, from, next) {
12     console.log('about.vue==>beforeRouteEnter');
13 
14     // 判断是否需要鉴权
15     if (to.meta.isAuth) {
16       //逻辑处理.....
17       next()
18     }
19     else {
20       next()
21     }
22   },
23   // 通过路由规则(点击)，离开该组件时被调用
24   beforeRouteLeave (to, from, next) {
25     console.log('about.vue==>beforeRouteLeave');
26     //逻辑处理.....
27     next()
28   },
29 
30 }
31 </script>
32 
33 <style>
34 </style>

posted on 2024-04-02 11:51 sunwugang 阅读(5) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

欢迎莅临 SUN WU GANG 的园子！！！

公告