路由守卫

2022-10-23 本文已影响0人饼子_5a37

是路由跳转前、中、后过程中的一些钩子函数，这些函数能让你操作一些其他事

分类：

全局守卫
- 前置路由守卫--router.beforeEach((to,from,next){...})
- 全局解析守卫--router.beforeResolve
- 后置路由守卫----router.afterEach((to,from){...})

全局守卫指路由实例上直接操作的钩子函数

特点：所有配置路由的组件都会触发

const router = new VueRouter({...})

beforeEach在路由跳转前触发，主要用于登陆beforeResolve
beforeResolve，这个钩子和beforeEach类似，也是路由跳转前触发，参数也是to,from,next三个。
afterEach 是在路由跳转完成后触发，它发生在beforeEach和beforeResolve之后,beforeRouteEnter (组件内守卫)之前。

组件内

指在组件内执行的钩子函数，类似于组件内的生命周期export default{ data(/{/... },

组件内路由守卫是在组件内写

1666591202698.png

beforeRouteEnter(to,from,next){...}

在渲染该组件的对应路由被confirm前调用

不能获取组件实例this 因为当守卫执行前，组件实例还没被创建

beforeRouteupdate(to,from,next){...}

在当前路由改变，但是该组件被复用时调用

举例来说，对于一一个带有动态参数的路径/foo/:id,在/foo/1和/foo/2之间跳转的时候，> 由于会渲染同样的Foo组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

可以访问组件实例this

beforeRouteLeave (to, from, next) {...}

导航离开该组件的对应路由时调用

可以访问组件实例this

组件内的路由钩子函数包括beforeRouteEnter路由进入组件之前调用，参数包括to, from, next。

该钩子在全局守卫beforeEach和独享守卫beforeEnter之后，全局beforeResolve和全局afterEach之前调用，要注意的是该守卫内访问不到组件的实例，也就是this为undefined,也就是他在beforeCreate生命周期前触发。beforeRouteUpdate在当前路由改变时，并且该组件被复用时调用，可以通过this访问实例。beforeRouteLeave 导航离开该组件的对应路由时调用，可以访问组件实例this.

单个路由独享

路由独享指在单个路由配置的时候也可以设置的钩子函数

const router = new VueRouter({ 
    routes: [{ 
        path:'/foo', 
        component: Foo, 
        beforeEnter: (to, from, next) =>{// ..}}
]}}

路由独享的钩子函数包括beforeEnter与全局的beforeEach完全相同，如果都设置则在beforeEach之后紧随执行，参数to、from、 next

路由守卫

猜你喜欢

热点阅读