vue 路由跳转进度条 Nprogress.js

本文介绍如何安装Nprogress加载进度条组件,并在Vue项目中进行集成配置。通过在main.js中引入Nprogress及样式文件,在路由的beforeEach钩子中启动进度条,在afterEach钩子中完成进度条,实现页面切换时显示平滑的加载进度。

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

安装Nprogress

npm install nprogress -S

在main.js中引入Nprogress

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

路由拦截器里使用Nprogress

注意在router.beforeEach里一定要加上next()否则路由不会跳转

router.beforeEach((to, from, next) => {
  NProgress.start();
  next()
});

router.afterEach(transition => {
  NProgress.done();
});

main.js文件最后如下

import Vue from 'vue'
import App from './App'
import router from './router'
import Mixin from './mixins';
import filters from './filters';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
Vue.mixin(Mixin);

Vue.config.productionTip = false
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));

router.beforeEach((to, from, next) => {
  NProgress.start();
  next()
});

router.afterEach(transition => {
  NProgress.done();
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
<think>首先,用户的问题是关于将Vue2的路由配置迁移到Vue3,包括路由配置、守卫和NProgress集成。系统指令要求我使用中文回答,结构清晰,并遵循LaTeX格式规则。关键点:-**行内数学表达式**:用$...$包裹。-**独立公式**:用$$...$$包裹并单独成段。-**生成相关问题**:在回答末尾添加相关问题。-**引用标识**:在引用的段落末尾添加引用标识,如[^1]。参考的引用:-引用[1]:关于Vue2路由安装:`npminstall--savevue-router@3.5.3`-引用[2]:Vue3使用组合式API,组件默认用setup函数。-引用[3]:VueRouter在Vue3中有语法和API更新,需注意变化。用户的需求:将Vue2的VueRouter代码迁移到Vue3,涉及路由配置、守卫和NProgress集成。我的回答需要:1.**结构清晰**:逐步解释迁移过程。2.**真实可靠**:基于Vue官方文档或标准实践。3.**使用中文**。4.**添加相关问题**:在末尾生成相关问题。5.**引用标识**:如果引用参考内容,添加标识。回答结构:-**引言**:简要介绍迁移的重要性。-**迁移步骤**:分解为路由配置、守卫、NProgress集成。-**代码示例**:提供Vue2和Vue3的对比代码。-**总结**:强调关键点。-**相关问题**:生成3-5个相关问题。具体内容:1.**路由配置迁移**:-Vue2:使用`newVueRouter()`创建实例。-Vue3:使用`createRouter()`和`createWebHistory()`(或其他模式)。-参考引用[3]:VueRouter核心概念相同,但API更新。2.**守卫迁移**:-Vue2:全局守卫如`router.beforeEach`。-Vue3:类似,但需适应组合式API。-引用引用[2]:Vue3使用setup函数。3.**NProgress集成**:-NProgress用于显示加载进度条。-在守卫中集成,类似Vue2和Vue3。-提供代码示例。代码块:使用Markdown代码块显示代码,确保LaTeX语法正确(但代码中没有数学表达式,所以不需要$...$)。生成相关问题:基于主题,如优化、常见问题、错误处理。引用标识:在提到参考内容时添加,如[^1]。最终回答大纲:1.**引言**:解释Vue2到Vue3路由迁移的必要性。2.**路由配置迁移**:-Vue2代码示例。-Vue3代码示例。-解释变化。3.**守卫迁移**:-全局守卫示例。-组件内守卫变化(引用[2])。4.**NProgress集成**:-如何在Vue3中实现。5.**总结**:关键注意事项。6.**相关问题**:列出3-5个问题。</think>### Vue 2到Vue 3路由配置迁移指南 将Vue 2的路由配置迁移到Vue 3时,需注意API更新和组合式API的引入。Vue Router的核心概念(如路由定义、守卫)保持一致,但语法和集成方式有变化[^3]。以下从路由配置、守卫和NProgress集成三个方面逐步说明迁移过程。迁移前,请确保安装Vue Router的Vue 3兼容版本: ```bash npm install vue-router@4 ``` #### 1. **路由配置迁移** 在Vue 2中,路由配置通过`VueRouter`构造函数实现。Vue 3改用`createRouter`和`createWebHistory`(或`createWebHashHistory`),并需显式定义路由模式。 - **Vue 2示例代码**: ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const router = new VueRouter({ mode: 'history', routes: [ { path: '/home', component: Home }, { path: '/about', component: About } ] }); new Vue({ router }).$mount('#app'); ``` - **Vue 3迁移后代码**: ```javascript import { createApp } from 'vue'; import { createRouter, createWebHistory } from 'vue-router'; import Home from './views/Home.vue'; import About from './views/About.vue'; const router = createRouter({ history: createWebHistory(), // 替代mode: 'history' routes: [ { path: '/home', component: Home }, { path: '/about', component: About } ] }); const app = createApp({}); app.use(router); app.mount('#app'); ``` **关键变化**: - 使用`createRouter`替代`new VueRouter`。 - `history: createWebHistory()`替代`mode: 'history'`(支持SSR时用`createMemoryHistory`)。 - 不再需要`Vue.use(VueRouter)`,改为在应用实例上直接`app.use(router)`[^3]。 #### 2. **守卫迁移** 路由守卫(如全局前置守卫`beforeEach`)语法类似,但Vue 3推荐使用组合式API编写组件内守卫。全局守卫可直接迁移,组件内守卫需改用`setup`函数[^2]。 - **全局守卫迁移(Vue 2和Vue 3通用)**: ```javascript // Vue 2和Vue 3中相同 router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isAuthenticated) { next('/login'); } else { next(); } }); ``` - **组件内守卫迁移**: Vue 2使用选项式API(如`beforeRouteEnter`),Vue 3改用组合式API的`onBeforeRouteUpdate`等钩子。 - **Vue 2示例**: ```javascript export default { beforeRouteEnter(to, from, next) { // 访问组件实例前逻辑 next(vm => vm.fetchData()); } } ``` - **Vue 3迁移后**: ```javascript import { onBeforeRouteUpdate } from 'vue-router'; export default { setup() { onBeforeRouteUpdate((to, from) => { // 直接在setup函数内使用 fetchData(to.params.id); }); return {}; } } ``` **关键变化**: - 组件内守卫从选项式迁移到组合式API,使用`onBeforeRouteUpdate`、`onBeforeRouteLeave`等函数[^2]。 - 移除`next`回调,改用返回值或异步处理(Vue Router 4自动解析Promise)。 #### 3. **NProgress集成迁移** NProgress用于显示页面加载进度条。集成方式在Vue 3中不变,但需在路由守卫中调用其方法。 - **安装NProgress**: ```bash npm install nprogress ``` - **在Vue 3中集成**: ```javascript import NProgress from 'nprogress'; import 'nprogress/nprogress.css'; router.beforeEach(() => { NProgress.start(); // 开始进度条 }); router.afterEach(() => { NProgress.done(); // 结束进度条 }); ``` **说明**: - 与Vue 2集成方式完全相同,无需额外修改。 - 确保在全局守卫中调用,以覆盖所有路由切换。 ### 迁移注意事项总结 - **API更新**:优先使用`createRouter`和组合式API钩子[^3]。 - **性能优化**:Vue 3的路由懒加载语法不变(`component: () => import('./Component.vue')`)。 - **错误处理**:守卫中未调用`next()`可能导致路由卡死,Vue Router 4推荐返回`true/false`或Promise。 - 迁移后测试路由跳转和守卫逻辑,确保兼容性[^1]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值