什么是导航守卫

导航守卫，也可以叫路由守卫，“导航”表示路由正在发生改变。vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。简单来说，就是在路由切换过程中进行限制，限制执行了，就是守卫成功了。

导航守卫分为三大类

• 全局前置守卫
• 单个路由独享守卫
• 组件内的守卫

实例准备

1、创建 vue 测试项目 test。

2、这里演示模板使用的是 vant 框架，安装命令

yarn add vant@latest-v2

# 在 main.js 中全局引入并注册

import Vant from "vant";
import "vant/lib/index.css";

Vue.use(Vant)

3、在 router/index.js 中

import Vue from "vue";
import VueRouter from "vue-router";
// 引入首页组件
import HomeView from ...