vue路由的钩子函数

有三种类型，共6个

一、全局的守卫（全局的守卫代表所有的页面）

守卫所有的页面，写在router/index.js文件中

1、router.beforeEach

在所有页面跳转之前自动执行，守卫所有的页面，必须执行next()才能正常往后进行

例：router.beforeEach((to,from,next)=>{})

to:代表到哪个页面去，from：代表从哪个页面来

2、router.afterEach

全局的守卫，在页面跳转成功后自动执行

例：router.afterEach((to,from,next)=>{})

注：全局的守卫也会守卫login（登录）页面，所以会永远没有next()就死循环了，所以我们要加一步判断，判断如果是login就下一步，不是login再跳转到login

二、组件级路由守卫

只守卫某一个页面，写在要守卫的组件里，和data，methods同级

1、beforeRoterEnter(to,from,next){}

在进入这个页面之前

2、beforeRoterUpdate(to,from,next){}

在这个页面的路径参数更新的时候自动触发

3、beforeRoterLeave(to,from,next){}

在离开这个页面时自动触发

三、单个路由规则独享的守卫(放在路由规则里)

beforeEnter(to,from,next){}

守卫某一个页面，这个不常用，一般用组件级守卫守卫单独的页面