NPgress+keep-alive lazyLoad_npgress组件-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_59029708/article/details/128489052

本文介绍了Vue应用中的优化策略，包括利用keep-alive组件实现路由缓存，通过NProgress加载指示器提升用户体验，以及详细讲解了导航守卫的三种应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

VUE的优化

一、用 keep-alive 实现路由缓存
- 使用步骤
- 1.在 App.vue 中的路由组件 router-view 上加上 keep-alive
二、NPgress
- 1、安装 npm install --save nprogress
- 2.然后在 router/index.js里写上以下几行代码
三、导航守卫

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

一、用 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) 不进入