这篇文章主要讲解了“vue-router的导航钩子怎么用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue-router的导航钩子怎么用”吧！
vue-router中有7个钩子函数，主要分3类：
全局钩子
前置守卫：router.beforeEach；
后置守卫：router.afterEach；
全局解析守卫：router.beforeResolve；
注意：全局解析守卫（router.beforeResolve）是在所有组件内守卫和异步路由组件被解析之后（导航被确认之前）调用。
路由独享钩子
路由独享钩子：单个路由独享的导航钩子，是在路由配置上直接定义的。
beforeEnter（路由独享守卫）；
const router = new VueRouter（{
routes: [
{
path: "/setting",
component: （） => import（"@/components/setting.vue"），
beforeEnter: （to, from, next） => {
console.log（"beforeEnter"）;
// do something
next（）;
},
},
],
}）;
钩子函数有三个参数：to、from、next（）
to：router即将进入的路由对象；
from：当前导航即将离开的路由；
next（）：是一个function，进行管道中的一个钩子，如果执行完了，那导航的状态就是 confirmed（确认的），否则为false，终止导航。
组件内导航钩子
beforeRouteEnter：执行时间 ==> 渲染该组件的对应路由被 confirm 之前;
beforeRouteUpdate：执行时间 ==> 当前路由已经改变，但是依然渲染该组件时;
beforeRouteLeave：执行时间 ==> 导航离开该组件的对应路由时;
这三种导航钩子是在路由组件内部直接定义的。
const File = {
template:——<div>File文件</div>——，
beforeRouteEnter （to, from, next） {
// …do something
},
beforeRouteUpdate （to, from, next） {
// …do something
},
beforeRouteLeave （to, from, next） {
// …do something
}
}
感谢各位的阅读，以上就是“vue-router的导航钩子怎么用”的内容了，经过本文的学习后，相信大家对vue-router的导航钩子怎么用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
