admin管理员组文章数量:1634343
路由钩子分为三种
- 全局钩子: beforeEach、 afterEach、beforeResolve
- 单个路由里面的钩子: beforeEnter
-
组件路由:beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave
全局钩子
- beforeEach: 全局前置守卫 进入路由之前
- beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
- afterEach 全局后置钩子 进入路由之后
路由的三个参数
-
to: 将要进入的路由对象
- from:将要离开的路由对象
- next: 这个参数是个函数,且必须调用,否则不能进入路由(页面空白)
// main.js 入口文件
import router from './router'; // 引入路由
router.beforeEach((to, from, next) => {
next();
});
router.beforeResolve((to, from, next) => {
next();
});
router.afterEach((to, from) => {
console.log('afterEach 全局后置钩子');
});
路由独享守卫
为某些路由单独配置守卫
const router = new VueRouter({
routes: [
{
path: '/test',
component: Test,
beforeEnter: (to, from, next) => {
// 参数用法与全局的钩子都一样,调用顺序在全局前置守卫后面,所以不会被全局守卫覆盖
}
}
]
})
路由组件内的守卫
- beforeRouteEnter 进入路由前
- beforeRouteUpdate (2.2) 路由复用同一个组件时
- beforeRouteLeave 离开当前路由时
触发钩子的顺序
将路由导航、keep-alive
、和组件生命周期钩子结合起来的,触发顺序,假设是从a组件离开,第一次进入b组件:
beforeRouteLeave
:路由组件的组件离开路由前钩子,可取消路由离开。beforeEach
: 路由全局前置守卫,可用于登录验证、全局路由loading等。beforeEnter
: 路由独享守卫beforeRouteEnter
: 路由组件的组件进入路由前钩子。beforeResolve
: 路由全局解析守卫afterEach
:路由全局后置钩子beforeCreate
:组件生命周期,不能访问this
。created
:组件生命周期,可以访问this
,不能访问dom。beforeMount
:组件生命周期deactivated
: 离开缓存组件a,或者触发a的beforeDestroy
和destroyed
组件销毁钩子。mounted
:访问/操作dom。activated
:进入缓存组件,进入a的嵌套子组件(如果有的话)。- 执行beforeRouteEnter回调函数next。
版权声明:本文标题:Vue 路由钩子 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1729175479a1188659.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论