本文主要介绍vue路由卫士(导航卫士)及其具体使用方法。通过示例代码进行了非常详细的介绍，对于大家的学习或者工作都有一定的参考价值。有需要的朋友下面跟边肖学习。
最近在学vue，感觉这个地方知识点很多，而且很重要，所以今天补充一点说明。
公文
其实航卫也是航线护卫，也可以是航线拦截。我们可以通过路由拦截来判断用户是否登录，用户是否有权限浏览这个页面需要结合meta来实现。
vue中的路由守护有三种，一种是全局路由守护，一种是组件内路由守护，一种是路由器专属守护。
所谓路由警卫，可以简单理解为一个家门口的保安。如果你想进入这所房子，你必须通过保安的检查。告诉路由守卫你是哪里人？你不能把陌生人放进去，对吧？你要去哪里？然后保安会告诉你下一步该怎么做。如果你确实是这个房子的主人允许进入的人，就让你进去；否则，打电话给所有者，与所有者讨论(登录和注册)，并给你许可。
//通过这个匹配确定是否有这个权限或者要求。这个一般设置为页面权限，比如哪些页面需要登录才能进入，哪些不需要。
to . matched . some(RES=RES . meta . require auth)
一、全局路由守卫
所谓全局路由守卫，就是小区的大门，是整个小区唯一的大门。如果你想进入任何房子，你需要通过这个门。
全局路由守卫有两个：一个是全局前守卫，一个是全局后守卫。
router.beforeEach((收件人，发件人，下一个)={
Console.log(to)=//到哪个页面？
Console.log(from)=//从哪个页面？
Next()=//一个回调函数
}
router.afterEach(to，from)={}
Next():回调函数的参数配置
Next(false):中断当前导航。如果浏览器的URL被更改(由用户手动更改或通过浏览器的后退按钮更改)，URL地址将被重置为对应于from路由的地址。
Next('/')或next({ path: '/'}):跳转到不同的地址。当前导航被中断，然后执行新的导航。您可以将任何位置的对象传递给next，并且您可以设置选项，如replace: true、name: 'home '以及在to prop或router.push中使用的任何选项。
二、元件路由保护装置
//与方法写在同一层：{}，组件路由保护是写在每个单独的vue文件中的路由保护。
beforeRouteEnter(收件人，发件人，下一个){
//注意，route进来之前组件实例还没有渲染，所以不能得到这个实例。您只能通过vm访问组件实例。
下一步(vm={})
}
beforeRouteUpdate(收件人，发件人，下一个){
//同一页面，刷新不同数据时调用，
}
beforeRouteLeave(收件人、发件人、下一个){
//离开当前路由页面时调用
}
三、路由独享守卫
路由专用防护是在路由配置页面上为该路由单独配置的防护。
导出默认的新VueRouter({
路线：[
{
路径：“/”，
姓名：'家'，
组件：“主页”，
beforeEnter:(收件人，发件人，下一个)={
//.
}
}
]
})
Vue-router提供了导航钩子：全局前导航钩子beforeEach和全局后导航钩子afterEach，在路由改变前后都会触发。因此，判断用户是否登录需要在beforeEach导航钩子中进行判断。
导航钩子有3个参数：
1.to:要输入的目的路由对象；
2.from:当前导航即将离开的route对象；
3.next:调用这个方法后，可以进入下一个钩子函数(afterEach)。
Next()//直接转到to指示的路由
Next(false) //中断当前路线
Next('route') //跳转到指定的路由
Next('error') //跳错路线
beforeEach：
路由配置文件：
从“vue”导入Vue
从“vue路由器”导入路由器
从“@/components/HelloWorld”导入HelloWorld
从“@/pages/home.vue”导入主页
Vue.use(路由器)
常量路由器=新路由器({
路线：[
{
路径：“/”，
名称：“HelloWorld”，
组件：HelloWorld
},
{
路径：“/home”，
姓名：'家'，
组件：主页
},
{
路径：“*”，
重定向：“/home”
}
],
})
router.beforeEach((收件人，发件人，下一个)={
console.log(到)；
console.log(来自)；
next()；
})
导出默认路由器；
打印结果如下：
用户身份验证代码：
router.beforeEach((收件人，发件人，下一个)={
//我在这里模仿了一个获取用户信息的方法。
let is login=window . session storage . getitem(' userInfo ')；
if (isLogin) {
//如果用户信息存在，则向下执行。
下一个()
}否则{
//如果用户令牌不存在，跳转到登录页面
if (to.path==='/login') {
下一个()
}否则{
下一步('/login ')
}
}
})
afterEach:
与beforeEach不同，afterEach不接收下一个函数，即第三个参数，并且不改变导航本身。一般来说，beforeEach用得最多，afterEach用得最少。
此处不接收Router.afterEach((to，from)={ //next。
console.log(到)；
console.log(来自)；
})
关于vue route guard(导航卫士)及其具体使用方法的这篇文章到此为止。想了解更多关于vue route guard的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。