vue导航守卫

一、导航守卫

1.vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的,单个路由独享的，或者组件级的。

(1)应用:比如在路由跳转前做一些验证，比如登录验证，vue-router提供的beforeEach可以方便地实现全局导航守卫(navigation-guards)。

(2)组件内部的导航守卫函数使用相同,只是函数名称不同（beforeRouteEnter、beforeRouteUpdate(2.2新增)、beforeRouteLeave).

二、导航守卫-导航解析流程(给路由的生命周期的钩子函数)

1.导航被触发。

2.在失活的组件里调用离开守卫。(离开上一个的a标签)

3.调用全局的beforeEach守卫。

4.在重用的组件里调用beforeRouteUpata守卫(2.2+)。(动态的内容，更新)

5.在路由配置里调用beforeEnter。(router  path)

6.解析异步路由组件。(不是直接展示出来的)

7.在被激活的组件里调用beforeRouteEnter.(还未渲染的时候，还未进入)

8.调用全局的beforeResolve守卫(2.5+)。(编译整个组件的时候)

9.导航被确认。

10.调用全局的afterEach钩子。(渲染完后)

11.触发DOM 更新。

12.用创建好的实例调用beforeRouteEnter 守卫中传给next 的回调函数。(传给下一个的时候)

三、导航守卫-前置守卫

1. router.beforeEach注册一个全局前置守卫:

当一个导航触发前时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫resolve 完成之前一直处于等待中。

2.语法：(登录验证的时候可以用)

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

(2) router.beforeEach((to, from, next)=>{//..))

-to: Route:即将要进入的目标路由对象

-from: Route:当前导航正要离开的路由

3.语法：

(1)参数next: Function:一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。

- next():进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirmed(确认的)。

-next(false):中断当前的导航。如果浏览器的URL 改变了（可能是用户手动或者浏览器后退按钮),那么URL地址会重置到from 路由对应的地址。

-next(‘/’)或者next({ path: '/’}):跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向next传递任意位置对象,且允许设置诸如replace: true、 name: 'home'之类的选项以及任何用在router-link的to prop或router.push 中的选项。

-next(error): (2.4.0+)如果传入next 的参数是一个 Error实例，则导航会被终止且该错误会被传递给router.onError(注册过的回调

四、导航守卫-后置守卫

1.全局后置钩子,然而和守卫不同的是,这些钩子不会接受next函数也不会改变导航本：

2.语法:

-router.afterEach(to,from)=>{

-//….

-})

-注:用法和前置一样

• 导航守卫独享守卫
• 1.以在路由配置上直接定义beforeEnter守卫:

-独享守卫可以单独拦截某个组件。

2.语法:

- const router = new VueRouter({

-routes: [

{

path: '/foo',

component: Foo,

beforeEnter:( to, from, nex)=>{//  ....}

)]))

注:这些守卫与全局前置守卫的方法参数是一样的。