vue router的钩子函数,vuerouter有哪些钩子函数
本文主要介绍了vue-router中的钩子函数及其执行顺序，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
一：全局导航钩子函数1、vue router.beforeEach(全局前警卫)2、vue router.afterEach(全局后警卫)二：路由独占警卫(in-route钩子)三：组件内警卫(in-component钩子)一、beforeRouteEnter、BeforerouteUpdate、beforeRouteUpdate
一：全局导航钩子函数
1、vue router.beforeEach（全局前置守卫）
BeforeEach hook函数是一个全局的before hook函数，(BeforeEach)意味着它必须在每次路由更改时执行。
它的三个参数：
To: (Route route object)要输入的目的地Route object to object下面的属性：path params查询hash全路径匹配名称meta(欠匹配，但可以直接用这个例子)from: (Route route object)当前导航即将离开route next: (Function函数)必须调用这个方法来解析这个hook。调用方法：next(参数或null) * * *必须为管道中的下一个钩子调用next(无参数的时候):。如果转到最后一个钩子功能，那么导航状态是确认(confirmed)next(/) 或者 next({ path: / }): 跳转到不同的地址。当前导航被中断，然后执行新的导航。在应用场景：上可以进行一些页面跳转前的处理，比如判断需要登录的页面，截取，进行登录跳转！router.beforeEach((收件人，发件人，下一个)={
if (to.meta.requireAuth) {
//确定路由是否需要登录权限。
if(cookie( token ){
//通过打包的cookies读取令牌。如果它存在，那么name将跳转回登录页面，如果它不存在。
Next()//在Next中不要加 path:/，会陷入无限循环。
}
否则{
下一个({
路径：“/login”，
查询：{redirect: to.fullPath}//以跳过的路由路径为参数，成功登录后跳转到该路由。
})
}
}
否则{
下一个()
}
})
应用场景，进入页面登录判断，管理员权限判断，浏览器判断。
//使用hook函数跳转路由。
router.beforeEach((收件人，发件人，下一个)={
const role=local storage . getitem( ms _ username )；
如果(！角色to.path！==/login){
下一步(/log in )；
}else if(to.meta.permission){
//如果是管理员权限，可以进入。只是简单的模拟管理员权限。
role===admin ？next():next(/403 )；
}否则{
//简单判断IE10及以下不进入富文本编辑器，这个组件不兼容。
if(navigator . user agent . index of( MSIE )-1 to . path===/editor ){
Vue。原型。$ alert (Vue-Quill-Editor组件与IE10及以下浏览器不兼容，请使用较新的浏览器查看，浏览器不兼容通知，{
确认按钮文本：“确定”
});
}否则{
next()；
}
}
})
2、vue router.afterEach（全局后置守卫）
Router.beforeEach在页面加载之前，而router.afterEach在页面加载之后。
二：路由独享的守卫(路由内钩子)
您可以在路由配置中直接定义beforeEnter保护：
const router=new VueRouter({
路线：[
{
路径：“/foo”，
组件：Foo，
beforeEnter:(收件人，发件人，下一个)={
//.
}
}
]
这些保护与全局预保护具有相同的方法参数。
三：组件内的守卫(组件内钩子)
1、beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
const Foo={
模板：` 1.`,
beforeRouteEnter(收件人，发件人，下一个){
//在确认呈现该组件的对应路径之前调用
//没有！可以！获取组件实例` this。
//因为在钩子执行之前组件实例还没有创建
},
beforeRouteUpdate(收件人，发件人，下一个){
//当当前路由改变，但组件被多路复用时调用
//比如对于一个带有动态参数的path /foo/:id，在/foo/1和/foo/2之间跳转时，
//由于将呈现相同的Foo组件，组件实例将被重用。在这种情况下这个钩子将被调用。
//可以访问组件实例` this。
},
beforeRouteLeave(收件人、发件人、下一个){
//当导航离开此组件的相应路线时调用
//可以访问组件实例` this。
}
2、路由钩子在实际开发中的应用场景
(一) 清除当前组件中的定时器
当组件中有定时器时，当路由被切换时，可以使用beforeRouteLeave将定时器清零，以免占用内存：
beforeRouteLeave(收件人、发件人、下一个){
window . Clear interval(this . timer)//清除计时器
下一个()
}
(二) 当页面中有未关闭的窗口， 或未保存的内容时， 阻止页面跳转
如果页面中有用户跳转前需要保存的重要信息，或者有弹出框，要阻止用户跳转，结合vuex状态管理(是否保存dialogVisibility)。
beforeRouteLeave(收件人、发件人、下一个){
//确定弹出框的状态以及信息是否保存。
if(this . dialog visibility===true){
This.dialogVisibility=false //关闭弹出框
Next(false) //返回当前页面并停止页面跳转
} else if(this . save message===false){
Alert(请保存信息并退出！)//弹出警告
Next(false) //返回当前页面并停止页面跳转
}否则{
Next() //否则，允许跳转。
}
(三) 保存相关内容到Vuex中或Session中
当用户需要关闭页面时，可以将公共信息保存到session或Vuex中。
beforeRouteLeave(收件人、发件人、下一个){
localStorage.setItem(名称，内容)；//保存到本地存储
下一个()
}
vue-router执行顺序
导航被触发。在停用的组件中调用beforeRouteLeave guard。在每个守卫之前调用全局。在重用的组件中调用beforeRouteUpdate guard (2.2)。在路由配置中输入之前调用。解析异步路由组件。在激活的组件中调用beforeRouteEnter。调用全局beforeResolve保护(2.5)。导航确认。调用全局afterEach钩子。触发DOM更新。调用beforeRouteEnter guard中传递给next的回调函数，创建的组件实例将作为回调函数的参数传入。以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。