vue的路由守卫有什么应用场景,vue3.0路由守卫
导航守护是在路由跳转之前、之中和之后的过程中的一些钩子函数。本文详细介绍了路由卫士在Vue中的具体使用，具有一定的参考价值。有兴趣的可以看看。
:
目录
1.全局护卫1.1全局前方护卫1.2全局后方路线护卫1.3集成2。路线专属守卫3。组件中的守卫角色：控制路由权限。
分类：全局防护、专用防护和组件内防护。
1.全局守卫
1.1 全局前置守卫
顾名思义，前卫主要是在你进行路由跳转之前，根据你的状态进行一系列操作（全局前置是为在路由初始化以及跳转之前都会触发）。
可以用router.beforeEach注册一个全局前卫(每个：每个，即任意路由跳转时都会触发)。
每个保护方法接收三个参数：
to:Route:路由对象即将进入目的地
from:Route:当前导航正在离开的路线。
next:function:一定要调用这个方法来解析这个钩子。执行效果取决于next方法的调用参数。
1.next():在管道中制作额外的下一个挂钩(to)。如果挂钩完成，则导航状态被确认。
2.next(false):中断当前导航。如果浏览器的URL被更改(可能是用户手动更改或者浏览器按了后退按钮)，地址将被重置为对应于from路由的地址。
3.next(/")或next( { path: / } ):跳转到同一个地址。的当前导航被中断，然后执行下一个新的导航。您可以将任何对象传递给next，并且您可以设置选项，如replace:true、name: home 以及prop或router.push中的任何选项。
确保在任何给定的导航保护中，下一个函数只被调用一次。它可以出现多次，但前提是所有的逻辑路径不重叠，否则钩子永远不会被解析或出错。
使用
你可以打印出from，to和next，看看他们会保存什么信息。
举个例子
从“vue”导入Vue
从“vue路由器”导入vue路由器
从以下位置导入主页./views/Home.vue
关于从导入./views/About.vue
从导入新闻./views/News.vue
导入邮件自./views/Message.vue
Vue.use(VueRouter)
恒定路线=[{
路径：“/home”，
姓名：家，
成分：家，
儿童：[
{
路径：“消息”，//不要在这里写成：/news
组件：消息
}
]
},
{
路径：“/about”，
姓名：关于姓名，
组件：关于，
Children: [{ //通过Children配置子路由。
路径：新闻，//不要在这里写成：/新闻
组件：新闻
}]
}
]
const router=new VueRouter({
路线
})
//全局预路由保护-初始化时调用，每次路由切换时调用。
router.beforeEach((收件人，发件人，下一个)={
console.log(到)；
//下面是一个简单的例子。
//即判断用户是否进入了需要认证的路由(这里的距离是新闻和消息)
if(to . path==/home/message to . path===/about/news ){
//如果进入，则判断信息是否缓存在本地(这里模拟登录的令牌)
if(local storage . getitem( name )=== haung zhi Zhen ){
下一个()
}
}否则{
//如果没有，就放心吧。
下一个()
}
})
导出默认路由器
上面这个例子的一个缺点是，当需要认证的路由很多的时候，需要逐个判断？没那个必要。因此，这里介绍的路由的另一个属性，即meta，可以在每个路由中配置。一般用来标识带有标识的属性，可以强制其同意判断，如下：
//使用元
router.beforeEach((收件人，发件人，下一个)={
console.log(到)；
If (to.meta.isAuth) {//确定是否需要认证。
if(local storage . getitem( name )=== haung zhi Zhen ){
下一个()
}
}否则{
下一个()
}
})
1.2 全局后置路由守卫
//全局路由后保护-在初始化期间和每个路由切换之后调用。
router.afterEach((收件人，发件人)={
if (to.meta.title) {
Document.title=to.meta.title 路由跳转示例//修改网页标题
}否则{
document.title=vue_test
}
})
1.3 整合
2. 路由独享的守卫
可以在route配置中直接定义beforeEnter guard，这些参数与全局front guard的方法参数相同。
const router=new VueRouter({
路线：[
{
路径：“/foo”，
组件：Foo，
beforeEnter:(收件人，发件人，下一个)={
//.
}
}
]
})
3.组件内的守卫
最后，您可以在路由组件中直接定义路由和导航保护：
beforeRouterEnter
在RouterUpdate之前
在RouterLeave之前
const Foo={
模板：` 1.`,
beforeRouteEnter(收件人，发件人，下一个){
//在确认呈现该组件的对应路径之前调用
//没有！可以！获取组件实例` this。
//因为在防护执行之前还没有创建组件实例。
},
beforeRouteUpdate(收件人，发件人，下一个){
//当当前路由改变，但组件被多路复用时调用
//比如对于一个带有动态参数的path /foo/:id，在/foo/1和/foo/2之间跳转时，
//由于将呈现相同的Foo组件，组件实例将被重用。在这种情况下这个钩子将被调用。
//可以访问组件实例` this。
},
beforeRouteLeave(收件人、发件人、下一个){
//当导航离开此组件的相应路线时调用
//可以访问组件实例` this。
}
}
关于路由卫士在Vue中的具体使用，本文到此为止。有关Vue路由卫士的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。