NPgress+keep-alive lazyLoad

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、用 keep-alive 实现路由缓存

在 vue 项目中，要想实现缓存功能，有一个很简单方便的方法  
就是使用 keep-alive 组件，keep-alive 可以实现组件或路由级的
缓存

使用步骤

1.在 App.vue 中的路由组件 router-view 上加上 keep-alive

代码如下（示例）：

 <!--缓存想要缓存的页面，实现后退不刷新-->
    <!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面-->
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>

二、NPgress

1、安装 npm install --save nprogress

2.然后在 router/index.js里写上以下几行代码

import NProgress from "nprogress"; // 导入 nprogress模块

import "nprogress/nprogress.css"; // 导入样式，否则看不到效果

NProgress.configure({ showSpinner: false }); // 显示右上角螺旋加载提示

三、导航守卫

第一种是全局守卫

beforeEach 路由进入之前

afterEach 路由进入之后

第二种 组件内守卫

beforeRouteEnter 路由进入之前

beforeRouteUpdate 路由更新之前

beforeRouteLeave 路由离开之前

第三种 独享守卫

beforeEnter 路由进入之前
// 有三个参数
to from next
to 要进入的页面路由
from  从哪个页面进入
next(true) 放行
next(false) 不进入