vue-admin-template解决使用动态路由刷新后404

最新推荐文章于 2024-09-23 16:19:26 发布
最新推荐文章于 2024-09-23 16:19:26 发布
阅读量4.8k 收藏 6
点赞数 4
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SKY_PLA/article/details/122303486
版权

背景：设置好动态路由后，在页面刷新或者加载会出现定位到404问题

问题原因：
权限控制的路由模块是动态添加进去的，404监听路由是在默认路由里面的，优先级比动态路由要高，所以刷新后默认先被404接管了，把404监听路由也放到动态路由的末尾就可以了

解决办法：
我把我constantRoutes 里面的404注释掉了，然后asyncRoutes里面加一个就好了

xxs!
关注
专栏目录
vue-router 4.0 动态路由会跳转到 404 页面的问题
纯爱枫若情的博客
07-10 7615
当然以上的代码只适用于我们文章一开始假设的场景，真实的业务场景中，应该会有更多更复杂的情况，但是万变不离其宗，只要理清了思路，掌握了原理，找到了应对方案，再复杂的场景也能一步步抽丝剥茧，应付起来将会游刃有余。所以，我们就会借用，router 提供的一些列的生命周期函数，来帮助我们确保，当用户信息存在的时候，能自动添加我们的动态路由。一种场景是，当用户未登录，这时候，也没有 vip 这个路由的存在，那么路由匹配不到，会直接被。为了用户体验的友好性，我们不可能让用户每次用我们的页面的时候，都先执行一遍登录。
springBoot集成vue-admin-template实现动态路由使用sql
07-18
springBoot集成vue-admin-template实现动态路由所使用的数据库数据sql
基于vue-admin-template 修改后的通用动态权限路由模板
11-20
基于vue-admin-template 修改后的通用动态权限路由模板,基础静态的路由自己配置，其余的可根据权限的分配设置路由，由后端返回路由地址
【两步解决】vue-route addRoute 动态路由导致刷新404
最新发布
weixin_43951592的博客
09-23 242
第一步：把 404 的匹配移到 addRoute 方法下面。第二步：在App.vue里（或者其他首页文件）
vue-admin-template刷新页面跳转404处理
ithover的博客
04-25 1715
网上找了好多，大部分说的是将 { path: '*', redirect: '/404', hidden: true }放在路由最后就可实现，但新测这种方式对history方式的路由配置无效，history需要使用下面的方法来实现，已经验证过线上是可行的 const createRouter = () => new Router({ mode: 'history', // require service support scrollBehavior: () => ({ y: 0 }),
解决vue-admin-template中权限控制使用动态路由刷新后404的问题
每天都记录一点点！
05-09 6304
vue-admin-template（vue-element-admin）是个非常好用的B端UI框架，谁用谁知道！ 在使用的过程中，加入权限模块后，刷新后权限控制的页面就默认跳转到404页面了，搞了半天终于解决了，原因是权限控制的路由模块是动态添加进去的，而我的404监听路由是在默认路由里面的，优先级比动态路由要高，所以刷新后默认先被404接管了，改一下，把404监听路由也放到动态路由的末尾就可以了，代码如下： // 404 page must be placed at the end !!! { .
vue-element-admin vue设置动态路由 刷新页面后出现跳转404页面Bug 解决方法
laosao_66的博客
04-22 3165
在使用的过程中，加入权限模块后，刷新后权限控制的页面就默认跳转到404页面了，原因是权限控制的路由模块是动态添加进去的，而我的404监听路由是在默认路由里面的，优先级比动态路由要高，所以刷新后默认先被404接管了，改一下，把404监听路由注释掉需要手动在动态路由加载后，再把通配路由加上去，所以有了解决方法二。这个bug的具体情况是：设置了动态路由之后，不同的用户登录之后显示了不同的侧边栏，在侧边栏点击菜单，渲染对应路由页面没有任何问题，但是在。（这种情况只出现在动态路由上，静态路由刷新没问题）。
vue-element-admin把动态路由放导航列表中间，动态路由刷新跳转404
weixin_43957510的博客
09-25 1884
需求 把动态路由放在导航中间而不是最后 思路 只要在修改原来插入动态路由的地方就可以 操作 修改文件： /src/store/modules/permission.js。 const mutations = { SET_ROUTERS: (state, routes) => { state.addRoutes = routes // state.routes = constantRoutes.concat(routes) //权限路由在最后 // 把权限路由放在中间，在c
vue-admin-template-4.4.0.zip
03-01
5. **项目结构**：解压后的"vue-admin-template-4.4.0"文件夹，通常会包含`src`目录（存放源代码）、`public`目录（静态资源）、`node_modules`（第三方依赖）、`.gitignore`（git忽略文件）、`package.json`（项目...
学习vue-admin-template，优化了大量融入代码，添加中文注释
05-16
在vue-admin-template中，学习如何配置路由，使用动态路由匹配和命名视图。 5. **axios**：常用于Vue项目的HTTP客户端，处理前后端数据交互。了解如何发起GET、POST请求，处理响应，以及错误处理。 6. **Element ...
详解vue-template-admin三级路由无法缓存的解决方案
10-15
在Vue.js应用中，特别是在使用Vue-template-admin框架时，可能会遇到三级路由无法缓存的问题。这个问题的核心在于Vue的`<keep-alive>`组件，它用于缓存组件实例，以提高性能并减少不必要的重新渲染。然而，当涉及到...
已解决：vue-admin-template动态菜单（不从后台获取菜单数据、动态路由、页面刷新404问题）
weixin_45213585的博客
06-14 1528
实现不访问后台的动态菜单。解决页面刷新404的问题
vue添加动态路由，刷新404问题
在工作中修行，达到禅定~~
10-26 917
在刷新的时候，会清除动态路由，这个时候尚未加载路由，然后基础路由上*匹配的是404页面，此时就会跳转到404页面。解决办法 : 在动态路由后面添加通配符路由规则。
vue-router addRouter添加动态路由后，在子组件上一刷新就404.
weixin_47372236的博客
10-27 1560
原因：静态路由的最后添加了404页面，静态路由的最后是个*优先级高。 苦恼了两天，最后在点击这里 方案:把404页面放到动态路由添加的最后就好。 // 引入路由文件这种的公共路由 // import { constantRoutes } from "../router"; // Layout 组件是项目中的主页面，切换路由时，仅切换Layout中的组件 import Layout from "@/layout"; export function getAsyncRoutes(routes) { cons
vue-admin-template 动态路由
Bug_yellow的博客
08-24 3116
vue-admin-template 动态路由 采用的是 vue-admin-template 后台管理系统模板 1、首先在 router>index.js下面的内容，这部分倒是没有什么特别大的改动： import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) /** * Note: sub-menu only appear when route children.length >= 1 * Detail
vue-router或者vue-admin-template中刷新跳转404的解决办法
qq_33974231的博客
02-23 5197
vue或者vue-admin-template中任意页面刷新都跳转404 vue在刷新的时候动态添加的router会清空，所以在动态添加的路由页面刷新的时候会因为清空的router而跳转到404.。 在/src/premission.js的最下方router.afterEach修改成下面这样 router.afterEach(to =>{ sessionStorage.setItem('r...
Vue添加动态路由后，不同角色访问“/”产生404问题
Moon Star
08-24 3203
若依二次开发，不同角色访问对应不同的首页，访问地址“/”一直跳转到404页面的问题。 ​
vue 动态路由 addRoutes 刷新页面404（空白）
热门推荐
huangruifeng的博客
06-03 1万+
vue开发页面，通过addRoutes实现动态路由的添加，但是在进入对应页面的时候刷新时跳转到404或空白，最后发现只需把空白页面跳转直接加载到动态路由后面即可解决，代码如下： 1：静态路由中注释掉{ path: '*', redirect: '/404', hidden: true }（如果有） 2：在动态路由中push上面注释掉的路由，asyncRoutes.push({ p...
Gateway动态路由引发的请求404
weixin_40559666的博客
01-07 1540
gateway 动态路由 引起的转发404
vue-admin-template动态路由前端操作
09-21
Vue-admin-template是一个基于Vue.js构建的后台管理模板，它提供了一套完整的用户界面和路由管理功能，包括动态路由的支持。动态路由在前端通常用于处理URL中带变量的情况，比如文章详情页、用户详情页等。 在Vue-admin-template中，你可以通过以下几个步骤来实现动态路由的操作： 1. 定义动态路径模式：在`router/index.js`文件中，使用冒号`:`来定义动态部分，例如`'/posts/:postId'`表示文章详情页面，`:postId`将作为动态参数传递。 ```javascript { path: '/posts/:postId', name: 'Post详情', component: () => import('@/views/posts/Post.vue'), } ``` 2. 动态路由配置：创建一个组件时，需要在组件内部获取并处理这个动态参数。在`methods`或者`computed`中，可以使用`this.$route.params.postId`来获取匹配的参数值。 ```javascript export default { // ... methods: { handlePostDetail() { const postId = this.$route.params.postId; // 对postId做进一步的操作，如请求数据... } }, // ... } ``` 3. 路由守卫：如果你想要在跳转到动态路由前进行权限检查或者其他验证，可以设置全局的路由守卫（如beforeEach），接收当前路由信息并作出相应判断。 ```javascript router.beforeEach((to, from, next) => { // 检查动态路由权限... next(); }); ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值