VUE3.0,DAY65，Vue路由守卫
作者：互联网
VUE3.0,DAY65
全局前置路由守卫
保护路由的安全。比如当我们使用下图的案例，只有特定的人员才可以访问其中的Message显示的信息。
我们首先使用网页的本地会话存储中输入进去一个name，值为my。实现只有value为my的用户才能访问该网页中的message信息。然后在index.js（路由配置文件）中给每个路由加上名字。最后使用设置路由守卫，这里我把value的值写为了mys，与网页中的my不同，点击网页就会发现，无效了，进不去子路由网页了。
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'
import News from '../components/News'
import Message from '../components/Message'
import Detail from '../components/Detail'
//创建并暴露一个路由器
const router = new VueRouter({
routes: [
//前两个是一级路由，嵌套的话，是在一级路由里边在写新路由
{//给路由起名字叫guanyu
name: 'guanyu',
path: '/about',
component: About
},
{
name: 'zhuye',
path: '/home',
component: Home,
// 下边是嵌套的二级路由，path中不用加/符号
children: [
{
name: 'news',
path: 'news',
component: News,
},
{
name: 'message',
path: 'message',
component: Message,
//我们需要点击message后，在继续显示东西
children: [
{
// 给路由起名字叫xiangqing
name: 'xiangqing',
//告诉路由，路径detail后边的第一个是参数id，第二个是参数title
path: 'detail/:id/:title',
component: Detail,
//props的第一种写法，值为对象,该对象中的所有key，value都以props的形式传给Detail组件
// props: { a: 1, b: 'hello' }
//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传递给Detail组件
// props: true
//props的第三种写法，值为函数,return内所有key，value都以props的形式传给Detail组件
props($route) {
return { id: $route.params.id, title: $route.params.title }
}
}
]
}
]
}
]
})
//在暴露路由器之前加一个路由守卫，beforeeach的意思是在每一次路由切换之前都会调用一个函数。
//全局前置路由守卫
router.beforeEach((to, from, next) => {
//to是路由切换的下一步去哪，from是路由切换来自哪里，next是同意下一步操作，类似于放行路由的切换
console.log(to, from);
//在嵌套一个if，当访问子路由时，才启动核查放行功能
if (to.path === '/home/news' || to.path === '/home/message') {
//如果本地存储的key.value值是name.my，那么就放行。
if (localStorage.getItem('name') === 'my') {
next()
}
} else {
next()
}
})
export default router
全局后置路由守卫
我们给每个路由里单独加一个属性，用来说明该路由是否需要权限的校验。可以优化前置路由守卫的代码。
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'
import News from '../components/News'
import Message from '../components/Message'
import Detail from '../components/Detail'
//创建并暴露一个路由器
const router = new VueRouter({
routes: [
//前两个是一级路由，嵌套的话，是在一级路由里边在写新路由
{//给路由起名字叫guanyu
name: 'guanyu',
path: '/about',
component: About,
},
{
name: 'zhuye',
path: '/home',
component: Home,
// 下边是嵌套的二级路由，path中不用加/符号
children: [
{
name: 'news',
path: 'news',
component: News,
//该路由是否做权限核验
meta: { isAuth: true }
},
{
name: 'message',
path: 'message',
component: Message,
//该路由是否做权限核验
meta: { isAuth: true },
//我们需要点击message后，在继续显示东西
children: [
{
// 给路由起名字叫xiangqing
name: 'xiangqing',
//告诉路由，路径detail后边的第一个是参数id，第二个是参数title
path: 'detail/:id/:title',
component: Detail,
//props的第一种写法，值为对象,该对象中的所有key，value都以props的形式传给Detail组件
// props: { a: 1, b: 'hello' }
//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传递给Detail组件
// props: true
//props的第三种写法，值为函数,return内所有key，value都以props的形式传给Detail组件
props($route) {
return { id: $route.params.id, title: $route.params.title }
}
}
]
}
]
}
]
})
//在暴露路由器之前加一个路由守卫，beforeeach的意思是在每一次路由切换之前都会调用一个函数。
//全局前置路由守卫
router.beforeEach((to, from, next) => {
//to是路由切换的下一步去哪，from是路由切换来自哪里，next是同意下一步操作，类似于放行路由的切换
console.log(to, from);
//在嵌套一个if，当访问路由时，依据路由内写的是否需要核验，启动核查放行功能
if (to.meta.isAuth) {
//如果本地存储的key.value值是name.my，那么就放行。
if (localStorage.getItem('name') === 'my') {
next()
}
} else {
next()
}
})
//后置路由守卫
//初始化的时候被调用，每次路由切换之后被调用
router.afterEach(() => {
})
export default router
我们实现一个需求，就是当切换路由页面时，网页的标签也随之改变。就使用到了后置路由守卫。
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'
import News from '../components/News'
import Message from '../components/Message'
import Detail from '../components/Detail'
//创建并暴露一个路由器
const router = new VueRouter({
routes: [
//前两个是一级路由，嵌套的话，是在一级路由里边在写新路由
{//给路由起名字叫guanyu
name: 'guanyu',
path: '/about',
component: About,
meta: { title: ' About ' }
},
{
name: 'zhuye',
path: '/home',
component: Home,
meta: { title: 'Home' },
// 下边是嵌套的二级路由，path中不用加/符号
children: [
{
name: 'news',
path: 'news',
component: News,
//该路由是否做权限核验
meta: { isAuth: true, title: 'News' }
},
{
name: 'message',
path: 'message',
component: Message,
//该路由是否做权限核验
meta: { isAuth: true, title: 'Message' },
//我们需要点击message后，在继续显示东西
children: [
{
// 给路由起名字叫xiangqing
name: 'xiangqing',
//告诉路由，路径detail后边的第一个是参数id，第二个是参数title
path: 'detail/:id/:title',
component: Detail,
meta: { title: 'xiangqing' },
//props的第一种写法，值为对象,该对象中的所有key，value都以props的形式传给Detail组件
// props: { a: 1, b: 'hello' }
//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传递给Detail组件
// props: true
//props的第三种写法，值为函数,return内所有key，value都以props的形式传给Detail组件
props($route) {
return { id: $route.params.id, title: $route.params.title }
}
}
]
}
]
}
]
})
//在暴露路由器之前加一个路由守卫，beforeeach的意思是在每一次路由切换之前都会调用一个函数。
//全局前置路由守卫
router.beforeEach((to, from, next) => {
//to是路由切换的下一步去哪，from是路由切换来自哪里，next是同意下一步操作，类似于放行路由的切换
console.log(to, from);
//在嵌套一个if，当访问路由时，依据路由内写的是否需要核验，启动核查放行功能
if (to.meta.isAuth) {
//如果本地存储的key.value值是name.my，那么就放行。
if (localStorage.getItem('name') === 'my') {
next()
}
} else {
next()
}
})
//后置路由守卫
//初始化的时候被调用，每次路由切换之后被调用
//后置路由守卫没有next
router.afterEach((to) => {
//修改网页的标签，切换到哪个路由页面，标签就改名。如果初始状态没切换 就叫首页
document.title = to.meta.title || '首页'
})
export default router
输出如下：
小结
独享路由守卫
某一路由单独享用的路由守卫。假设现在我们只想对单独一个路由，新闻news做出限制。其他的不做限制。使用beforeEnter属性。index.js内代码如下
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'
import News from '../components/News'
import Message from '../components/Message'
import Detail from '../components/Detail'
//创建并暴露一个路由器
const router = new VueRouter({
routes: [
//前两个是一级路由，嵌套的话，是在一级路由里边在写新路由
{//给路由起名字叫guanyu
name: 'guanyu',
path: '/about',
component: About,
meta: { title: ' About ' }
},
{
name: 'zhuye',
path: '/home',
component: Home,
meta: { title: 'Home' },
// 下边是嵌套的二级路由，path中不用加/符号
children: [
{
name: 'news',
path: 'news',
component: News,
//该路由是否做权限核验
meta: { isAuth: true, title: 'News' },
beforeEnter: (to, from, next) => {
if (to.meta.isAuth) {
//如果本地存储的key.value值是name.my，那么就放行。
if (localStorage.getItem('name') === 'my') {
next()
}
} else {
next()
}
}
},
{
name: 'message',
path: 'message',
component: Message,
//该路由是否做权限核验
meta: { isAuth: true, title: 'Message' },
//我们需要点击message后，在继续显示东西
children: [
{
// 给路由起名字叫xiangqing
name: 'xiangqing',
//告诉路由，路径detail后边的第一个是参数id，第二个是参数title
path: 'detail/:id/:title',
component: Detail,
meta: { title: 'xiangqing' },
//props的第一种写法，值为对象,该对象中的所有key，value都以props的形式传给Detail组件
// props: { a: 1, b: 'hello' }
//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传递给Detail组件
// props: true
//props的第三种写法，值为函数,return内所有key，value都以props的形式传给Detail组件
props($route) {
return { id: $route.params.id, title: $route.params.title }
}
}
]
}
]
}
]
})
// //在暴露路由器之前加一个路由守卫，beforeeach的意思是在每一次路由切换之前都会调用一个函数。
// //全局前置路由守卫
// router.beforeEach((to, from, next) => {
// //to是路由切换的下一步去哪，from是路由切换来自哪里，next是同意下一步操作，类似于放行路由的切换
// console.log(to, from);
// //在嵌套一个if，当访问路由时，依据路由内写的是否需要核验，启动核查放行功能
// if (to.meta.isAuth) {
// //如果本地存储的key.value值是name.my，那么就放行。
// if (localStorage.getItem('name') === 'my') {
// next()
// }
// } else {
// next()
// }
// })
// //后置路由守卫
// //初始化的时候被调用，每次路由切换之后被调用
// //后置路由守卫没有next
// router.afterEach((to) => {
// //修改网页的标签，切换到哪个路由页面，标签就改名。如果初始状态没切换 就叫首页
// document.title = to.meta.title || '首页'
// })
export default router
我们把本地存储中的value值改为了mys，代码中的核验是需要value值为my才有权查看news里边的信息，所以这里无论怎么点击news，都看不到里边的内容。
小结
内置路由守卫
比如我们想进入About组件，即操作的是About组件，那么内置路由，beforeRouterEnter被调用。当离开About组件切换到别的路由组件时，就调用beforeRouterLeave。代码都写在About组件内。
标签：Vue,name,title,import,VUE3.0,DAY65,props,path,路由 来源： https://blog.csdn.net/weixin_48681463/article/details/120492069