vue3动态路由+页面加载进度条

已于 2022-11-24 11:20:20 修改
阅读量1.7k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： vue3+typeScript+antd搭建前端项目 文章标签： 前端 javascript vue.js
于 2022-07-08 10:09:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/echo_Ae/article/details/125672687
本文介绍了在Vue3项目中如何实现动态路由，通过后端传递的数据进行路由渲染，并提到了使用`addRoute`方法的关键点。同时，作者建议结合vue-devtools扩展以监测路由的添加情况。

前言

这个月使用vue3来架构公司后端项目，刚好要弄动态路由，我这里就抛砖引玉一下

开始

ruoter - config.ts

import {RouteRecordRaw} from "vue-router";
import LayoutView from "@/layout/IndexLayoutView.vue";

const routesList: Array<RouteRecordRaw> = [
    {
        path: '/login',
        name: 'login',
        component: () => import(/* webpackChunkName: "login" */ '@/views/login/IndexLoginView.vue')
    },
    {
        path: '/',
        name: 'layout',
        component: LayoutView,
        redirect: '/home',
        children: [
            {
                path: '404',
                component: () => import(/* webpackChunkName: "test" */ '@/views/404.vue'),
                name: '404',
                meta: {
                    title: '404'
了解本专栏 订阅专栏 解锁全文 超级会员免费看
《Vue3笔记》第21节：Vue3项目引入NProgress加载进度条插件
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
01-27 475
前一个小节的内容中，介绍了如何全局设置滚动条的样式，这个小节来学习一个进度条插件，插件名称叫做NProgress，使用这个插件可以很方便实现进度加载的功能。
vue3+vite+vue-router4.x实现动态添加路由
listener_life的博客
05-15 6290
根据菜单信息，动态添加路由，并解决页面刷新，路由消失的问题。
vue3加载进度条
kanno的博客
02-07 1368
vue3加载进度条
Three.js_模型加载进度条
weixin_42137574的博客
12-13 3300
首先引入js 因为这个进度条使用vue的ui样式库 <!-- 加载进度条--> <!-- 引入前端框架vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <!-- vuejs的库element-ui --> <script src="http://www.yanhuang.
Vue3+TypeScript+Element Plus+el-progress 进度条应用示例
最新发布
BillKu的博客
11-09 229
优点：进度显示友好，及时同步后端数据，显示到95后，进度值还会继续递增，使用体检好。缺点：会遇到进度条到达95就一直不动（眼睁睁等待了2分钟），使用体验差。进度到95后，换成后端计算进度，每隔3秒发送请求获取后端数据。进度到95后，换成后端计算进度，每隔3秒发送请求获取后端数据。后端完成工作任务，前端正在接收响应数据进行渲染。优点：无需频繁与后端交互获取进度值。缺点：逻辑实现相对复杂一些。渲染完成，展示最终的数据。
vue3 多级动态路由
Cupid
08-05 2916
vue3 多级动态路由
vue3 动态加载页面
05-14 761
首先，通过下面代码告诉编译器要编译哪些页面。
vue3添加页面进度条
weixin_52379706的博客
07-30 736
router.beforeEach((to, from, next) => { // 开启进度条 NProgress.start() next() })router.afterEach(() => { // 关闭进度条 NProgress.done() })其次在main.js中引入。然后在路由配置文件中添加。
Vue 项目中使用路由鉴权实现网页进度条
iku_n的博客
08-27 547
在 Web 开发中，用户界面的流畅性和交互性对用户体验至关重要。为了在页面跳转时给用户提供反馈，我们可以利用 NProgress 这样的第三方库来实现一个进度条。本文档将指导您如何在 Vue 项目中结合路由鉴权来实现这一功能。
vue页面加载时的进度条功能(实例代码)
10-15
nprogress是一个非常小巧的JavaScript库，用于在页面顶部显示加载进度条。它提供了简单的API来控制进度条的开始、结束，以及自定义进度条的样式。 3. **基本使用方法**： - 在Vue项目中安装nprogress插件。 - 在...
vue 路由加载进度条
偏执的小男孩儿
05-18 422
vue路由进度条 cnpm install --save nprogress //安装并引入样式 import NProgress from 'nprogress' // progress bar import 'nprogress/nprogress.css' //初始化展示为false NProgress.configure({ showSpinner: false }) // NProgress Configuration //路由守卫 router.beforeEach((to, from, nex
vue3学习——路由进度条
m0_49494051的博客
02-11 898
【代码】vue3学习——路由进度条。
vue3项目中在页面跳转时展示 loading page
fans_x的博客
10-16 2504
其实原理很简单，由于页面渲染的顺序是从上往下的，所以加载顺序是 body(.page-lading)->div(#app)->div(#loading-screen .loading-screen)->script。由于主要内容(#app)的渲染顺序在最后(渲染的时候还需要一点时间)，并且加载页的样式也在这里已经引入了。不管是在页面跳转，还是页面加载时都少不了 loading page，如果说没有加载页，用户体验感会极度的不好。注意：加载页的样式和结果尽量精简，这样加载页的加载速度才会快。
前端中，路由切换时，顶部有进度条效果（vue3）
m0_69247348的博客
05-21 399
实现路由切换时，顶部有进度条效果，增加用户体验
013Vue3独立路由模块加载使用范例
阿赛
10-25 342
【代码】013Vue3独立路由模块加载使用范例。
Vue3进度条（Progress）
热门推荐
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
04-06 1万+
用于展示当前操作进度的组件，支持：进度条；进度圈；完成进度条/圈；渐变进度条/圈；自定义样式；自定义主题色；自定义边缘形状；自定义文字；总之，功能丰富，简单易用😁😁
vue3.x 42-1 页面加载优化
monian187的博客
05-14 837
v3 页面加载优化
【 Vue3 性能优化】页面加载性能 与 更新性能
前端知识分享喵
03-08 4028
Vue 在大多数常见场景下性能都是很优秀的，通常不需要手动优化。然而，总会有一些具有挑战性的场景需要进行针对性的微调。
vue3中通过自定义指令实现loading加载效果
quequnlong的博客
05-13 4234
在现代Web开发中，提升用户体验一直是开发者们追求的目标之一。其中，一个常见的场景就是在用户与应用程序进行交互时，特别是当进行异步操作时（如网络请求），为用户提供即时的反馈，避免用户因为等待而感到困惑或不满。这通常通过显示一个加载指示器（通常称为Loading效果）来实现。本文将深入探讨如何在Vue 3中通过自定义指令的方式来实现Loading加载效果。自定义指令是Vue提供的一种强大工具，允许我们在Vue模板中附加自定义行为。
vue3动态路由加载
06-24
<think>我们正在处理关于Vue3动态路由加载的问题。根据用户需求，我们需要提供实现方法或最佳实践，并给出示例。参考提供的引用内容，我们可以总结出几种常见的实现方式：1.前端路由：通过文件结构动态生成路由（如使用import.meta.glob）2.后端路由：根据用户角色/权限从服务器获取路由信息，然后动态添加路由我们将重点放在动态路由加载的实现步骤上，包括：-路由的动态添加（使用VueRouter的addRoute方法）-权限验证（根据用户角色过滤路由）-解决刷新白屏问题（在刷新时重新加载动态路由）同时，我们将结合引用内容提供代码示例。步骤：1.定义静态路由（如登录页、404页等）和动态路由（需要权限的路由）2.用户登录后，获取用户权限信息（角色或菜单列表）3.根据权限信息，过滤出用户有权访问的路由4.使用router.addRoute()动态添加路由5.将路由信息保存到状态管理（如Pinia）或本地存储，以便刷新时重新加载6.在应用初始化时（如main.ts）或路由守卫中检查并加载动态路由示例代码将展示如何实现动态路由加载，包括路由定义、权限过滤、添加路由以及处理刷新问题。注意：引用[4]提供了较完整的思路，包括如何根据角色菜单生成路由表，以及解决刷新白屏问题（在Pinia加载后，路由加载前重新加载动态路由）。下面我们开始组织回答。</think>### Vue3 动态路由加载实现方法与最佳实践 在 Vue3 中实现动态路由加载主要涉及**路由权限控制**和**按需加载**两大核心，以下是具体实现方式和最佳实践： #### 一、核心实现步骤 1. **路由表拆分** ```typescript // router/index.ts import { createRouter, createWebHistory } from &#39;vue-router&#39; // 静态路由（无需权限） const constantRoutes = [ { path: &#39;/login&#39;, component: () => import(&#39;@/views/Login.vue&#39;) }, { path: &#39;/404&#39;, component: () => import(&#39;@/views/404.vue&#39;) } ] // 动态路由模板（需权限控制） const asyncRouteMap = [ { path: &#39;/dashboard&#39;, component: () => import(&#39;@/layout/DefaultLayout.vue&#39;), meta: { requiresAuth: true, role: &#39;admin&#39; } } ] ``` 2. **权限验证与路由过滤** ```typescript // utils/auth.ts export const filterRoutes = (userRole: string, routes: RouteRecordRaw[]) => { return routes.filter(route => { // 验证路由权限 const routeRoles = route.meta?.role || [] return routeRoles.includes(userRole) || routeRoles.length === 0 }) } ``` 3. **动态添加路由** ```vue // Login.vue <script setup> import { useRouter } from &#39;vue-router&#39; import { filterRoutes } from &#39;@/utils/auth&#39; const router = useRouter() const userRole = ref(&#39;editor&#39;) // 从API获取实际角色 const loadDynamicRoutes = async () => { const allowedRoutes = filterRoutes(userRole.value, asyncRouteMap) allowedRoutes.forEach(route => router.addRoute(route)) // 添加404兜底路由（必须最后添加） router.addRoute({ path: &#39;/:pathMatch(.*)&#39;, redirect: &#39;/404&#39; }) } </script> ``` #### 二、最佳实践方案 1. **路由持久化方案**（解决刷新白屏） ```typescript // stores/authStore.ts (Pinia) import { defineStore } from &#39;pinia&#39; import { filterRoutes } from &#39;@/utils/auth&#39; export const useAuthStore = defineStore(&#39;auth&#39;, { actions: { async initDynamicRoutes() { const userRole = localStorage.getItem(&#39;userRole&#39;) if (!userRole) return const routes = await fetchRoutesFromAPI() // 从API获取路由配置 const filtered = filterRoutes(userRole, routes) filtered.forEach(route => this.router.addRoute(route)) } } }) // main.ts import { createApp } from &#39;vue&#39; import { useAuthStore } from &#39;./stores/authStore&#39; app.use(router) const authStore = useAuthStore() authStore.initDynamicRoutes() // 初始化动态路由 ``` 2. **路由元信息规范** ```typescript declare module &#39;vue-router&#39; { interface RouteMeta { requiresAuth?: boolean roles?: string[] // 允许访问的角色 title?: string // 菜单标题 icon?: string // 菜单图标 } } ``` 3. **动态菜单生成** ```vue // Layout.vue <template> <el-menu :routes="dynamicMenus" /> </template> <script setup> import { computed } from &#39;vue&#39; import { useRouter } from &#39;vue-router&#39; const router = useRouter() const dynamicMenus = computed(() => router.getRoutes().filter(route => route.meta?.showInMenu && !route.meta?.hidden ) ) </script> ``` #### 三、关键问题解决方案 1. **路由重复添加** 使用标志位控制初始化次数： ```typescript let isRoutesLoaded = false const loadRoutes = () => { if (isRoutesLoaded) return // ...添加路由逻辑 isRoutesLoaded = true } ``` 2. **404页面配置** 动态路由需最后添加兜底路由： ```typescript router.addRoute({ path: &#39;/:pathMatch(.*)*&#39;, redirect: &#39;/404&#39; }) ``` 3. **路由加载状态管理** ```vue <template> <router-view v-if="isRoutesReady"/> <Loading v-else /> </template> <script setup> import { watch } from &#39;vue&#39; import { useAuthStore } from &#39;@/stores/auth&#39; const authStore = useAuthStore() const isRoutesReady = ref(false) watch(() => authStore.routesLoaded, (loaded) => { if (loaded) isRoutesReady.value = true }) </script> ``` #### 四、完整工作流程 ```mermaid graph TD A[用户登录] --> B[获取用户角色/权限] B --> C[过滤可用路由] C --> D[动态添加路由] D --> E[生成导航菜单] E --> F[路由跳转] F --> G{页面刷新？} G -->|是| H[从持久化存储读取权限] H --> C G -->|否| F ``` > **最佳实践建议**： > 1. 使用路由懒加载`() => import()`提升性能 > 2. 配合Pinia/Vuex管理路由状态 > 3. 服务端返回路由标识而非完整结构 > 4. 添加路由加载进度条优化体验 > 5. 开发环境保留静态路由便于调试[^4] ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

An_s

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值