路由守卫

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

分类：

• 全局守卫

  • 前置路由守卫--router.beforeEach((to,from,next){...})

  • 全局解析守卫--router.beforeResolve

  • 后置路由守卫----router.afterEach((to,from){...})

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

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

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

1. beforeEach在路由跳转前触发，主要用于登陆beforeResolve

2. beforeResolve，这个钩子和beforeEach类似， 也是路由跳转前触发，参数也是to,from,next三个。

3. 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。

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

• 单个路由独享

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

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

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