关于Vue3动态添加路由后，刷新页面路由丢失的解决

最新推荐文章于 2025-04-29 16:29:02 发布
原创 最新推荐文章于 2025-04-29 16:29:02 发布
· 832 阅读 · 6 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #vue.js

问题描述：在实现根据角色权限动态添加路由的功能时，遇到了麻烦。本人动态添加路由的思路如下：在登录时去后端获取路由信息，然后动态添加，再跳转主页。这个实现思路让我成功跳转主页后能够使用添加的动态路由，然而，一旦刷新页面，添加的动态路由就会丢失。

解决过程：

1. 在index.ts中（本人的路由文件，router/index.ts，配置静态路由和路由守卫所在的文件），发现每次刷新页面整个index.ts文件会整个重新执行，而其他操作（页面的前进、后退等）则只会由于执行路由守卫。那么重点就是，利用整个页面刷新的这种特性，在index.ts中，路由守卫外，设置一个标志，来判断页面是否被刷新。一旦页面被刷新，说明动态路由丢失，需要重新添加。

2. 再判断完页面刷新后，还有一个问题，由于router.addRoute()是异步操作，在它没添加完成时，可能就执行了next()去跳转页面，此时就不能找到路由信息，还是会白屏。如下图

解决方法如下

当页面被刷新时，会触发路由守卫，此时count==1去执行了添加动态路由的方法，由于是异步操作，它没执行完就执行了next(to.fullPath)，再次触发路由守卫，count++，等到重新回到这一个地方，异步操作已经完成了，路由添加完毕，此时count==2，不会执行if里面的动态路由添加方法，而是执行else里面的next直接跳转目标页面。问题彻底解决。

吐槽一句，网上找的解决方法大多无法解决，最后是在B站一个视频里找到的灵感，如果看不懂我的方法，可以去看看这个视频。贴一下视频链接：【vue3实战5.13-处理动态添加的路由刷新白屏】 https://www.bilibili.com/video/BV1QC4y1n7wK/?share_source=copy_web&vd_source=5c5e132774852e5a176f1d8cbb4c4134

DUITFANG
关注
vue3动态路由+页面刷新丢失路由+再次加载路由
m0_66879773的博客
03-14 7230
注：这里会衍生出一个问题，第一次登录的时候，路由信息没加进去，会跳404，所以这里需要做一个判断，判断路由to.matched这个去哪里的路由信息数组有没有数据，没有就再次添加动态路由信息，还有这块需要添加一个全局标识isAddAgain是否需要重新加载路由。动态路由添加后，每次刷新页面空白，这是因为刷新后路由守卫没再次走一遍，这里就需要在App.vue里面做判断，重新添加路由信息并跳转刷新前路由。目前路由只有静态的页面，我们需要做动态路由，需要在路由守卫router.beforeEach中添加。
vue动态添加路由后刷新页面白屏问题
weixin_47673864的博客
06-10 4504
页面刷新白屏其实是因为vuex引起的，由于刷新页面vuex数据会丢失，所以动态添加路由这一步也就失效了在通过vuex中的state属性存储路由在sessionStorage中，只是存储了左侧菜单栏展示的信息path地址，但是并没有存进去路由详细信息，比如name，meta值，利用vue插件即可看到本地route里面的真实数据！所以；只需要添加路由守卫，在每次页面刷新的时候都来判断是否添加的动态路由【这里设置一个变量记录是否添加的布尔值】，如果为false，即再次执行一遍添加动态路由的过程即可next（） 在
vue 解决addRoutes动态添加路由后刷新失效问题
08-27
主要介绍了vue 解决addRoutes动态添加路由后刷新失效问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决vue3 路由query传参刷新后数据丢失的问题
最新发布
m0_71835253的博客
04-29 563
前言：在页面刷新的时候，路由query数据会被清空，网上很多方法说query传参可以实现，反正我是没有实现。思路：将数据保存到本地，通过 “？” 进行判断是否有数据，页面销毁的时候删除本地的数据。2.封装公共的处理方法，方便后期使用。无数据就获取本地的数据。3.在子组件里面使用。
Vue3中使用vue-router刷新获取动态路由时页面丢失的问题
weixin_40389330的博客
07-26 2409
vue3中关于页面刷新动态路由组件消失的问题
动态路由刷新后消失或重定向到404
weixin_55800388的博客
04-09 548
当用户刷新页面时，Vue Router 动态路由的内存会消失，会重新触发路由守卫（如 beforeEach），所以也需要重新加载动态路由。使用 next({ …登录后路由守卫中没有加载动态路由，则会导致菜单内容加载不出来。
vue3 动态添加路由刷新后页面丢失(白屏)问题
qq_45736656的博客
03-08 5595
vue3 动态添加路由刷新后页面丢失(白屏)问题
vue3动态路由页面刷新丢失路由
qq_46596540的博客
12-12 790
如果不会配置动态路由可以看我前一篇文章vue3配置动态路由建议测试前先把404页面注释掉，要不然老是跳404如果配置完动态路由之后 点击左侧导航栏肯定没有问题，但是一刷新就白屏了或者跳到自己配的404首先搞清楚执行顺序，下面是main.js的打印和路由守卫的打印看到这张图 你会怎么做？？
为什么动态路由刷新之后路由消失,以及解决措施
qq_55121347的博客
08-10 1722
为什么动态路由刷新之后路由消失,以及解决措施
关于Vue刷新后丢失动态路由
gao_wg的博客
11-21 8809
页面刷新，动态路由丢失
Vue学习-刷新界面动态路由丢失
Java_Scholar0的博客
09-17 5726
Vue前言页面刷新，路由重新初始化，通过动态路由方式添加的路由因而被清除1.通过路由守卫解决 前言 页面刷新，路由重新初始化，通过动态路由方式添加的路由因而被清除 1.通过路由守卫解决 //路由守卫 router.beforeEach((to, from, next) => { iView.LoadingBar.start(); //console.log("store",store); //处理刷新界面动态路由丢失问题 let userToken = store.state.use
vue2+vue-router动态路由添加及路由刷新后消失的解决办法
weixin_44166849的博客
06-06 4304
vue-router动态路由添加及路由刷新后消失的解决办法
vue-router路由参数刷新消失的问题解决方法
01-21
场景：vue-router实现的单页应用，登录页调用登录接口后，服务器返回用户信息，然后通过router.push({name: ‘index’, params: res.data})传给主页组件，并在主页显示数据。但是刷新页面后，数据就消失了。 解决方案： 1、session&服务器渲染 传统的方案是，登录页和主页是单独的两个页面，登录成功后服务器生成用户信息对应的session，然后渲染主页数据，并通过响应头将sessionid传给浏览器并生成相应的cookie文件。这样下次请求页面时，浏览器会在http header带上相应的cookie，然后服务器根据cookie中的sessionid
vue路由传参页面刷新参数丢失问题解决方案
12-13
最近项目中涉及到跨页面传参数和后台进行数据交互，看到需求之后第一反应就是用路由传参来解决；Vue中给我们提供了三种路由传参方式，下面我们一个一个的来看一下： 方法一：params传参： this.$router.push({ name:"admin", 　　　　//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { 　　//组件路径 path: '/admin', 　　//组件别名 name: 'admin', 　　//组件名
Vue实现动态路由及登录404页面跳转控制页面刷新空白解决方案.docx
10-26
本文档主要介绍了如何在Vue项目中实现动态路由、登录逻辑以及404页面跳转控制等功能，并解决页面刷新时出现空白的问题。 #### 动态路由与登录逻辑实现 ##### 路由配置 首先，在项目的`router/index.js`文件中进行...
vue router带参数页面刷新或者回退参数消失的解决方法
weixin_40314969的博客
07-27 8973
写在前面： 传参是前端经常需要用的一个操作，很多场景都会需要用到上个页面的参数，本文将会详细介绍vue router 是如何进行传参的，以及一些小细节问题。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。 Vue router如何传参 params、query是什么？ params：/router1/:id ，/router1/123，/router1/789...
vue3 vite pinia 配置动态路由、解决刷新页面路由消失问题
jierleijiajia的博客
09-05 5137
1，需要在静态路由的基础上用vue路由上面的addRoute()方法来动态添加路由，最后生成我们需要的路由。上面只是在登陆时候添加了路由，点击刷新页面后会消失，需要在main.js中配置一下。2，封装添加路由的方法，在刷新页面时重新生成路由。
Vue3动态路由页面刷新找不到路由空白页面
qq_48256948的博客
01-02 4194
1.新年的第一天，作为一个刚用VUE3的菜鸟程序员遇到了一个获取用户权限动态路由的问题，如果不跳转刷新页面路由都能正常使用，但是一刷新页面通过 router.addRoute()添加的路由就会缺失，并且报路由找到的警告。 2.程序员快速解决bug的方法就是找度娘，但是这次度娘好像不给力了，我看到大多数大佬说的就是添加next({...to,replace: true})，我这里也是直接CV大法看问题解决了吗，结果发现还是不行，只要在动态路由上刷新页面就会变成空白页 3.所以我们这采用常规解决问题的办法
问题记录：vue3 刷新后丢失动态路由
m0_67987829的博客
12-30 2493
vue3 刷新后丢失动态路由问题原因和解决
vue动态添加路由刷新后路由图标字段消失了
03-21
### Vue 动态添加路由刷新后路由图标字段丢失解决方案 在 Vue 中实现动态路由时，如果遇到刷新页面后路由配置中的自定义字段（如 `meta.icon` 或其他扩展属性）丢失的情况，通常是因为这些字段并未持久化到服务端或未通过某种机制重新加载。以下是针对此问题的具体分析与解决方法： #### 1. **原因分析** 当浏览器刷新时，Vue 应用会重新启动，此时仅保留静态路由配置，而动态路由则需要再次从服务端拉取并注册。如果没有正确处理动态路由的元信息（如 `icon`），就会导致这些字段丢失。 根据已有描述[^2]和实际开发经验可知，动态路由的核心在于如何将后端返回的数据转换为合法的路由对象，并将其注入到 Vue Router 的实例中。 --- #### 2. **解决思路** ##### 方法一：确保动态路由数据结构完整 在请求后端接口获取路由列表时，应保证返回的数据包含完整的路由配置信息，包括但不限于路径 (`path`)、名称 (`name`) 和元信息 (`meta`)。例如： ```javascript const menuDataFromServer = [ { path: '/dashboard', name: 'Dashboard', meta: { icon: 'home', title: '首页' }, children: [] } ]; ``` 随后可以通过工具函数将上述数据转化为标准的 Vue Router 配置项。具体逻辑如下所示[^3]: ```javascript function generateRouters(menuList) { const result = []; menuList.forEach(item => { const route = { path: item.path, component: () => import(`@/views${item.component}`), // 假设组件路径已知 name: item.name, meta: item.meta || {} }; if (item.children && item.children.length > 0) { route.children = generateRouters(item.children); } result.push(route); }); return result; } ``` 最后，在应用初始化阶段完成动态路由的挂载操作： ```javascript import Vue from 'vue'; import Router from 'vue-router'; // 初始化基础路由 const constantRouterMap = [{ path: '/', redirect: '/login' }]; let dynamicRouterMap = []; Vue.use(Router); export function createRouter() { const router = new Router({ mode: 'history', routes: [...constantRouterMap] }); // 添加全局前置守卫 router.beforeEach(async (to, from, next) => { if (!dynamicRouterMap.length) { try { const res = await fetch('/api/getMenu'); // 请求后端菜单数据 const menuData = await res.json(); dynamicRouterMap = generateRouters(menuData); // 转换为路由配置 router.addRoutes(dynamicRouterMap); // 注册动态路由 } catch (error) { console.error('Failed to load dynamic routers:', error); } } next(); }); return router; } ``` 此处的关键点在于利用 `router.addRoutes()` 将生成后的动态路由追加至当前路由器实例上[^4]。 --- ##### 方法二：存储状态于本地缓存 为了进一步优化用户体验，可以考虑借助 LocalStorage 或 Vuex 来保存用户的权限范围及其对应的路由表。这样即便发生页面刷新，也可以快速恢复之前的路由配置而不必每次都向服务端发起请求。 示例代码片段展示如何结合 Vuex 实现这一功能： ```javascript // store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { routers: [], addRouters: [] }, mutations: { SET_ROUTERS(state, routers) { state.routers = routers; state.addRouters = routers.filter(router => !/^\/(login|register)/.test(router.path)); } }, actions: { GenerateRoutes({ commit }, roles) { return new Promise(resolve => { let accessedRouters; if (roles.includes('admin')) { accessedRouters = allRouters; // 所有可用路由 } else { accessedRouters = filterAsyncRoutes(allRouters, roles); // 过滤出对应角色可访问的部分 } commit('SET_ROUTERS', accessedRouters); resolve(accessedRouters); }); } } }); ``` 接着修改前面提到的 `beforeEach` 守护钩子部分，使其优先尝试读取 Store 数据而非直接依赖网络通信： ```javascript if (!store.getters.addRouters.length) { await store.dispatch('GenerateRoutes', userRoles); } dynamicRouterMap = store.getters.addRouters; if (dynamicRouterMap.length) { router.addRoutes(dynamicRouterMap); } next(to); ``` 这种方法不仅提升了性能还增强了系统的健壮性[^1]。 --- #### 总结 综上所述，要彻底解决 Vue 动态路由刷新后丢失自定义字段的问题，需做到以下几点： - 后端提供全面且标准化的路由 JSON 结构； - 正确解析该结构并通过程序手段映射成适合 Vue Router 使用的形式； - 可选地引入客户端侧的状态管理技术来减少不必要的重复劳动。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值