解决vue3+element-plus +pinia 动态路由刷新丢失路由信息，以及404 跳转异常

最新推荐文章于 2024-07-26 15:05:11 发布
最新推荐文章于 2024-07-26 15:05:11 发布
阅读量155 收藏
点赞数 2
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43414269/article/details/138338225
版权

1.解决

2.参考文档
                        
原文链接：https://blog.csdn.net/weixin_45952652/article/details/131192829

，45
关注
vue3 + ts +pinia+element-plus+mock 项目---动态路由+用户权限路由篇
hzz1998的博客
12-01 2351
实现动态路由前提是服务端做好Router路由表的返回数据格式，一般分为两种情况(本人见识少，目前只遇到这两种)一是服务端返回客户端登录用户的权限ID数组，客户端通过权限ID修改对应路由的hidden属性选择是否展示，同时在router.beforeEach中判断好每次路由跳转的目标地址是否符合权限信息，防止通过地址栏输入方式跳转；二是前端配置好login，home等基础通用路由，再由服务端返回完整路由表，通过解析路由数据，动态添加至路由表中。至此，动态路由数据基本就可以成功添加在本地的路由表中了。
基于Spring Boot+Vue 3+Element-Plus+Pinia+Vant的电商管理系统源码.zip
08-31
总结来说，这个电商管理系统通过Spring Boot搭建后端服务，处理业务逻辑和数据交互，Vue 3构建前端界面并利用Element-Plus、Vue-Router和Pinia实现用户交互和状态管理，Vant可能用于优化移动端体验。这样的架构组合...
vue3 动态路由及使用动态路由后刷新界面出现空白页或者404
AKindofo的博客
03-11 3921
vue3 动态路由刷新404或者空白
Vue3 动态添加路由刷新后出现404解决方案
weixin_43169949的博客
06-05 593
vue3 动态添加路由，刷新页面后出现404的完美解决方案
Vue3中使用vue-router刷新获取动态路由时页面丢失的问题
最新发布
weixin_40389330的博客
07-26 1235
vue3中关于页面刷新动态路由组件消失的问题
vue3 动态添加路由刷新后页面丢失(白屏)问题
qq_45736656的博客
03-08 5309
vue3 动态添加路由刷新后页面丢失(白屏)问题
vue3动态路由+页面刷新丢失路由+再次加载路由
m0_66879773的博客
03-14 4438
注：这里会衍生出一个问题，第一次登录的时候，路由信息没加进去，会跳404，所以这里需要做一个判断，判断路由to.matched这个去哪里的路由信息数组有没有数据，没有就再次添加动态路由信息，还有这块需要添加一个全局标识isAddAgain是否需要重新加载路由。动态路由添加后，每次刷新页面空白，这是因为刷新后路由守卫没再次走一遍，这里就需要在App.vue里面做判断，重新添加路由信息并跳转刷新前路由。目前路由只有静态的页面，我们需要做动态路由，需要在路由守卫router.beforeEach中添加。
基于vue3+ts+vue-router+pinia+element-plus的后台管理系统源码
10-12
Vue3 是 Vue.js 框架的最新版本，它带来了许多改进和新特性，使得开发更加...开发者可以通过研究这个项目源码，学习如何在实际项目中整合 Vue3、TS、Vue Router、Pinia 和 Element Plus，从而提升自己的前端开发技能。
基于Spring Boot+Vue+Element-Plus+Pinia+Vant的电商管理系统源码.zip
12-24
在本项目中，Vue 3被用于构建用户界面，处理动态数据绑定、路由跳转和组件通信。 Element-Plus是Element UI的升级版，它是一套为开发者、设计师和产品经理准备的基于Vue 2和Vue 3的桌面端组件库。Element-Plus提供...
基于Vue3+Element-Plus搭建的商城后台管理系统源码.zip
04-04
Vue3+Element-Plus搭建的商城后台管理系统是一个现代前端开发框架的应用实例，它结合了Vue.js的最新版本Vue3和Element-Plus UI库，用于构建高效、可复用且易于维护的后台管理界面。Vue3提供了更强大的响应式系统、...
vue3-elementPlus-admin:vue3后台管理模板 , 基于vue3.0 + elementPlus 实现的后台管理系统模板 动态路由 动态菜单 皮肤切换 登录逻辑
05-10
v3-element 基于vue3.x 实现的后台管理系统模板 1、 登录逻辑. 2、 基本布局(基于elementPlus) 3、 动态路由逻辑 4、 动态菜单栏逻辑 5、 面包屑 6、 皮肤切换 7、 假数据模拟路由菜单 gif示例 Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build Customize configuration See .
vue3动态路由刷新后空白或者404
qq_45555960的博客
06-09 3496
在使用beforeEach 进行拦截路由采用动态路由时，页面刚初始化时路由正常跳转但页面刷新后出现空白或者404。通过后端拿到路由数据，遍历路由数据通过router.addRoute一个个的添加，同时将路由数据通过。x缓存起来，当页面刷新时，从缓存里拿出路由数据再重新添加，同时配合路由守卫来跳页面。时动态添加的路由已经被完全加载上去，一般是与添加动态路由时配合使用。刷新页面后动态添加的路由页面空白。逻辑不当的情况下，很容易死循环。
vue3 如何保证pinia刷新数据不丢失
weixin_59395272的博客
04-28 331
原文链接：https://blog.csdn.net/small_sapling/article/details/135390523。使用pinia-plugin-persistedstate插件前需先安装pinia插件并导入。pinia数据持久化（pinia-plugin-persistedstate)插件使用。在mian.ts中导入pinia-plugin-persistedstate插件。// 定义保存数据的对象。// 导入pinia中存储的对象。// 使用pinia保存用户信息。
vue-element-plus-admin修改了动态路由后登录显示404的问题
2301_81030084的博客
05-22 408
最近开发的时候使用vue-element-plus-admin mini分支这个后台模板，分享一个404解决方案。
vue3+element Plus使用el-tabs标签页，页面刷新不会到默认页(2)，并且可以监听分页表格的页码和每页条数的变化
m0_52761651的博客
08-03 3132
vue3+element Plus使用el-tabs标签页，页面刷新不会到默认页(2)，并且可以监听分页表格的页码和每页条数的变化。
Vue3：刷新页面报错404的解决方法
smiledawen的博客
11-09 1545
Vue3：刷新页面报错404的解决方法 - 掘金不同的历史模式 | Vue Router
vue-element-admin vue设置动态路由 刷新页面后出现跳转404页面Bug 解决方法
laosao_66的博客
04-22 3069
在使用的过程中，加入权限模块后，刷新后权限控制的页面就默认跳转到404页面了，原因是权限控制的路由模块是动态添加进去的，而我的404监听路由是在默认路由里面的，优先级比动态路由要高，所以刷新后默认先被404接管了，改一下，把404监听路由注释掉需要手动在动态路由加载后，再把通配路由加上去，所以有了解决方法二。这个bug的具体情况是：设置了动态路由之后，不同的用户登录之后显示了不同的侧边栏，在侧边栏点击菜单，渲染对应路由页面没有任何问题，但是在。（这种情况只出现在动态路由上，静态路由刷新没问题）。
vue项目线上页面刷新报404 解决方法
ddf__的博客
11-06 636
这样的url中带有#，如果把mode: 'history’就能去掉#号，也可以正常访问，但是再次刷新页面就会出现404错误。之后在网上找到了另外一个解决方式，在服务器。配置文件里，添加如下代码，再刷新就OK了。vue-router mode 默认为。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值