vue-router的导航钩子怎么用
这篇文章主要讲解了“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:——
beforeRouteEnter (to, from, next) {
// …do something
},
beforeRouteUpdate (to, from, next) {
// …do something
},
beforeRouteLeave (to, from, next) {
// …do something
}
}
感谢各位的阅读,以上就是“vue-router的导航钩子怎么用”的内容了,经过本文的学习后,相信大家对vue-router的导航钩子怎么用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
网页标题:vue-router的导航钩子怎么用
链接分享:http://ybzwz.com/article/gpchjs.html