浅谈Vue导航守卫

什么是导航守卫？
导航守卫可以看做vue-router的生命周期钩子函数。
作用：主要是用来通过跳转或取消的方式来守卫导航
例如：用户没有登录就前往主页面，此时利用导航守卫将用户重定向到登录页面

示例：
根据导航的不同生命周期，会触发不同的导航守卫钩子函数
创建vue项目，src目录结构如下：

在views目录下创建Contact.vue文件
About.vue组件代码

在这里插入代码片// About.vue
<template>
  <div class="about">
    <p>about</p>
  </div>
</template>

Contact.vue

// Contact.vue
<template>
  <div class="contact">
    <p>Contact</p>
  </div>
</template>

Home.vue

// Home.vue
<template>
  <div class="home">
    <p>Home</p>
  </div>
</template>

接下来在src/router.js中进行路由配置

// src/router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Contact from './views/Contact.vue'
import About from './views/About.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/contact',
      name: 'contact',
      component: Contact
    }
  ]
})

export default router;

接下来添加全局前置导航守卫：

// src/router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Contact from './views/Contact.vue'
import About from './views/About.vue'

Vue.use(Router)

const router = new Router({
  routes: [{
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/contact',
      name: 'contact',
      component: Contact
    }
  ]
})

// 全局前置守卫
+ router.beforeEach((to, from, next) => {
+   console.log('进入新导航之前：');
+   console.log('to:', to);
+   console.log('from:', from);
+   next();
+ })

export default router;

该守卫会在进入新的路由前触发，to表示要去到哪里，from表示从哪里来，next是一个方法，要调用该方法来resolve这个钩子，执行效果依赖next方法的调用参数
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 方法中注册过的回调。

全局后置守卫，路由独享守卫，组件内的守卫也和上述大同小异
afterEach：全局后置守卫，进入某一个路由之后触发钩子函数。
beforeEnter：路由独享的守卫，只针对某一个路由有效。
beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave：组件内的守卫，针对某一个组件有效。
这些导航守卫的用法，更多内容请参阅官方文档：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html