路由导航守卫(全局守卫、路由独享守卫、组件内守卫)"/>
vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
一共有三种
第一种是全局守卫:
beforeEach 路由进入之前
这个是写在路由的里面的,只有进入这个路由才可以调用
afterEach 路由进入之后
全局后的钩子,钩子不会结束next函数也不会改变导航本身。
router.afterEach((to, from) => {// ...
})
第二种 组件内守卫:
beforeRouteEnter 路由进入之前
beforeRouteUpdate 路由更新之前
beforeRouteLeave 路由离开之前
beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用},beforeRouteUpdate (to, from, next) {// 在当前路由改变,但是该组件被复用时调用},beforeRouteLeave (to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`}
第三种:
独享守卫
beforeEnter 路由进入之前
有三个参数
to from next
router.beforeEach((to, from, next) => {// to当前要跳去的路由对象// form这是你要离开的路由对象// next结束参数,可以看做一个保安,想过去就得打招呼,不然不让你过。
});
author:ice Sea Love Rain
更多推荐
vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
发布评论