vue-router导航守卫,vue路由守卫导航栏权限配置
本文主要介绍能快速了解Vue航线的导航卫士。“导航”就是路线在变。vue-router提供的导航卫士主要是通过跳转或者取消来守护导航。有许多机会可以嵌入到路线导航过程中：全局、专用于单个路线或组件级别。我们来快速看一下具体内容。
一.全球警卫
1.全球前线卫士
2.警卫的全球分析
3.全局后钩
第三，路线的专属守卫
四。组件中的防护装置
动词（verb的缩写）一个完整的导航分析过程。
概念：
导航意味着路线在变。
vue-router提供的导航卫士主要用于通过跳转或取消来守护导航。在路线导航过程中嵌入了许多机会：全局的、单个路线独有的或组件级的。
导航守卫:包括全球导航卫士和本地导航卫士。
目录
vue-router全局有三个守卫
router . before each:global front guard，进入路由前。
Router.beforeResolve:全局解析保护，在beforeRouteEnter调用后调用(不常用)
Router.afterEach:全局post挂钩，输入路由后。
一、全局守卫
你可以使用 router.beforeEach 注册一个全局前置守卫：
const router=new VueRouter({.})
router.beforeEach((收件人，发件人，下一个)={
//to和from都是路由实例。
//to:即将跳转到的路由。
//from:离开的当前路线。
//下一个：函数
})
接下来：函数：一定要调用这个方法来解析这个钩子。执行效果取决于下一个方法的调用参数。
Next():继续处理管道中的下一个钩子。如果所有钩子都被执行，导航状态被确认。
Next(false):中断当前导航。如果浏览器的URL被更改(由用户手动更改或通过浏览器的后退按钮更改)，URL地址将被重置为对应于from路由的地址。
Next (/)或next ({path:/}):跳转到不同的地址。当前导航被中断，然后执行新的导航。您可以将任何位置的对象传递给next，并且您可以设置选项，如replace: true、name: home 以及在to prop或router.push中使用的任何选项。
Next(Error): (2.4.0)如果传入Next的参数是错误实例，导航将被终止，错误将被传递给router.onError()注册的回调。
注意：如果是NEXT (/)或者NEXT ({PATH:/})，只要带了要释放的路径，那么前面肯定有判断。在…里
什么时候释放他，不然他会一直循环下去。
1.全局前置守卫
2.5.0 新增
//全局分辨率保护
router.beforeResolve((to，from.next)={ })
在2.5.0中，您可以向router.beforeResolve注册一个全局防护，这与router.beforeEach类似，区域
在导航确认之前，在所有内部警卫和异步路由组件都被解析之后，不要调用解析警卫。
2.全局解析守卫
您还可以注册全局post挂钩，但是，与guards不同，这些挂钩不会接受next函数，也不会改变导航本身：
//全局post挂钩
router.afterEach((to，form)={ })
当调用因为：afterEach时，该路由已经被跳过，因此不需要下一个函数。
3.全局后置钩子
如果不想全局配置路由，可以单独为某些路由配置防护。
比如：分别给主页页面分配守卫。
{
路径：“/mainpage”，
名称：“关于”，
组件：关于，//路由独占保护
beforeEnter:(收件人，发件人，下一个)={
if(from . name===/main page/about ){ alert(这是来自about )
}否则{
Alert(“这不是来自关于”)
} next()；//必须为下一步调用。否则，它不会跳。
}
}
},
三、路由独享的守卫
最后，你可以在路由组件内直接定义以下路由导航守卫：
BeforeRouteEnter():在输入路线之前
BeforeRouteUpdate():路由和多路复用同一组件时
BeforeRouteLeave():当离开当前路线时
在Product中举个例子：
//全局分辨率保护
router.beforeResolve((to，from.next)={
})
//全局post挂钩
router.afterEach((to，form)={
})
{
路径：“/mainpage”，
名称：“关于”，
组件：关于，
//路由独占保护
beforeEnter:(收件人，发件人，下一个)={
if(from . name===/main page/about ){
提醒(“这是来自于关于”)
}否则{
Alert(“这不是来自关于”)
}
next()；//必须为下一步调用。否则，它不会跳。
}
}
},
导出默认值{
//组件中的guard beforeRouteUpdate触发的条件是：当前路由发生变化，但组件被重用时。
例如，从产品/订单到产品/购物车的路径重用了组件Product.vue。
将触发BeforeRouteUpdate。可以得到这个实例。
一个完整的导航分析过程。
//因为调用这个钩子的时候组件实例还没有创建，所以不能得到这个。
beforeRouteEnter(收件人，发件人，下一个){
console . log(to . name)；
//如果您想要获取实例
//下一个(vm={
////这里的vm是组件(this)的一个实例
//});
next()；
},
beforeRouteUpdate(收件人，发件人，下一个){
console.log(to.name，from . name)；
next()；
},
//当路线即将离开时调用此方法。
//比如用户编辑了一些东西，但是还没有保存，想离开这个页面，就要提醒他还没有保证。
救人，要不要离开？
beforeRouteLeave(收件人、发件人、下一个){
Const leave=confirm(你确定要离开吗？);
If(leave) next() //离开
Else next(false) //不要离开
},
}
当前路线改变时触发BeforeRouteUpdate，但组件被重用。
比如说：产品/订单到产品/购物车这条路线，全部重复使用Product.vue这个组件，这次
将触发BeforeRouteUpdate。可以得到这个实例。
四、组件内的守卫
1.导航被触发。
2.在停用的组件(即将离开的页面组件)中调用离开保护。beforeRouteLeave
3.在每个守卫之前呼叫全局。
4.在重用的组件中调用beforeRouteUpdate guard (2.2)。
5.在进入进路配置之前，呼叫(进路的唯一守卫)。
6.分析异步路由组件。
7.在激活的组件(要进入页面的组件)中调用beforeRouteEnter。
8.调用全局beforeResolve保护(2.5)。
9.导航已确认。
10.调用全局afterEach钩子。所有的钩子都被触发了。
1.触发DOM更新。
12.使用创建的实例调用beforeRouteEnter guard中传递给next的回调函数。
这就是这篇关于快速了解Vue路由和导航卫士的文章。有关Vue路由和导航卫士的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。