vue-router@3.5.1 动态添加路由之后无法跳转

最新推荐文章于 2023-09-08 18:33:42 发布
最新推荐文章于 2023-09-08 18:33:42 发布
阅读量2k 收藏
点赞数
分类专栏： vue 常见问题记录 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaomanonyo/article/details/113930027
版权
在升级Vue Router到3.5.1后，项目中出现登录成功后路由无法跳转的故障。作者通过降级Vue Router版本至3.0.7解决了该问题，但寻找不降低版本的解决办法还在进行中。博客内容关注前端路由管理和权限控制在升级库版本后可能出现的兼容性问题。
摘要由CSDN通过智能技术生成

问题描述：

项目根据不同角色做了权限控制，前端通过登录获取角色 ，动态加载对应的路由，vue-router升级到3.5.1版本之后，突然登录成功之后，路由就不能跳转了

解决办法：

首先说一下我这边的  就是把vue-router 的版本降低到3.0.7（我是降低到的这个版本，然后重新运行一下就行了）npm i vue-router@3.0.7

 

但是在不改变版本的情况下的解决办法，我还没弄出来，找到了再补充。。。。

 

_Subsequently
关注
专栏目录
vue-router 4.0 动态路由会跳转到 404 页面的问题
纯爱枫若情的博客
07-10 7517
当然以上的代码只适用于我们文章一开始假设的场景，真实的业务场景中，应该会有更多更复杂的情况，但是万变不离其宗，只要理清了思路，掌握了原理，找到了应对方案，再复杂的场景也能一步步抽丝剥茧，应付起来将会游刃有余。所以，我们就会借用，router 提供的一些列的生命周期函数，来帮助我们确保，当用户信息存在的时候，能自动添加我们的动态路由。一种场景是，当用户未登录，这时候，也没有 vip 这个路由的存在，那么路由匹配不到，会直接被。为了用户体验的友好性，我们不可能让用户每次用我们的页面的时候，都先执行一遍登录。
vue-router的使用：定义路由、路由跳转、监听路由
 我的博客
01-04 1046
分为： 1. 定义路由 2. 在组件内路由跳转 3. 监听路由的两种方式 定义路由 包括：普通的路由定义、name的定义、路径参数的定义、嵌套路由、路由重定向、匹配所有的路由 // 0. 首先要调用 Vue.use(VueRouter) // 1. 定义组件 // 可以从其他文件 import 进来 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar.
Vue的路由配置（Vue2和Vue3的路由配置）
weixin_46022934的博客
07-12 2万+
系列文章目录 一、路由是什么？ 二、Vue2中路由的创建步骤 1.安装正确的路由版本（这里我踩坑了） 2.vue2中配置路由的步骤 步骤如下： 代码如下图所示 如下图所示：
Vue Router无法跳转路由(箭头函数引发的惨案)
nonlinearthink的博客
05-16 3803
今天用Vue Router的时候发现了一个比较有趣的事情。 先来看看我一开始写的router/index.js import Vue from "vue"; import VueRouter from "vue-router"; import Home from "../views/Home.vue"; Vue.use(VueRouter); const routes = [ { path: "/", name: "Home", component: Home },
Vue Router 子路由进不去
CSU_Zipple的博客
12-21 4132
检查一下子路由的路径是否带了根路径'/' 比如 children:[ { path:"/modify/:id", name:"modifyAddress", props:true, component:ModifyDetail },{ path:/"new", ...
addRouter页面跳转空白问题
qq_35178316的博客
10-25 3270
vue router 采坑儿记，希望能帮助到你： 1. 问题： 需求：前端路由表，需网站首次加载后，从后端动态获取并刷新（本项目中没有登录） 开始思路（坑儿）： /** * vue router 动态路由实现 使用 router.addRouter() 方法 * 1. 因为本项目不存在登录流程，所以网站初始没有任何路由，也不能在登陆成功后再 addRouter * 2. 解决思路：只能在...
vue3 addRoute 动态路由 页面刷新后 路由失效 [Vue Router warn]: No match found for location with path
热门推荐
ZHANG_666
05-12 4万+
vue-router 4.0 取消了 addRouters 设置动态路由只能使用 addRouter 动态路由一般是从后端获取 然后经过数据格式处理 但在页面刷新后会出现一下警告： vue-router.esm-bundler.js?6c02:71 [Vue Router warn]: No match found for location with path “/formlist/stepform/other” 但通过getRouters又能够获取到所有的异步路由 分析:页面刷新后由于是异步获取的原
vue 路由跳转页面打开新页面_vue-router跳转时打开新页面的两种方法
weixin_39629780的博客
12-20 1万+
vue-router跳转时打开新页面的两种方法最近还是在痛苦的挣扎中挣扎吧记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了)，有两个方法：1、标签实现新窗口打开官方文档中说 v-link 指令被 组件指令替代，且 不支持 target="_blank" 属性，如果需要打开一个新窗口必须要用标签，但事实上vue2版本的 是支持 target="_blank" 属性...
Vue-Router路由path相同警告，不允许导航到相同路由，报错“NavigationDuplicated: Avoided redundant navigation to current loc
Sodaxiang的博客
11-28 1325
Vue-Router路由path相同警告，不允许导航到相同路由，报错"NavigationDuplicated: Avoided redundant navigation to current location: " 报错提示：避免重复路由； 原因：在页面上重复进入了相同的路由； 解决：主要有3种方案，如下（对于repalce方法也同样适用）： 直接在路由跳转的部分加上'.catch(()=>{})'，这可以避免显示错误，因为浏览器认为异常已被处理。 在定义路由时候加上全局捕获.
Laravel 项目中用 vue-router 实现页面跳转
Grace_Zhong的博客
05-11 832
准备工作 切换到项目路径下，安装 vue-router npm install vue-router 整体思路 路由 web.php -> view 中的页面 -> app.js -> component 中的 vue 文件 创建路由 在 routes/web.php 中添加一个路由，网址为 /testVueRoute，显示页面为 resources/view 中的 testVueRoute.blade.php Route::get('/testVueRoute', function()
vue-spa
weixin_46202648的博客
11-17 1059
Vue全家桶 课程目标： 1 能够说出Vue全家桶的各个组件(Vue-CLI、Vue-Router、Vuex、Axios)的概念、功能和使用场景 2 能够使用Vue全家桶进行项目开发 0 前置知识-ES6模块化 0.1 目标 能够说出模块化的概念 能够使用export关键字和import关键字 0.2 路径 什么是模块化 export关键字的用法 import关键字的用法 备注：此处的代码暂时无法执行，待本章课程内容学习完，就可以运行 0.3 体验 0.1.1 什么是模块化 模块化就是把代码进行拆分
【VUE】使用白名单，含参路由仍不被导航守卫拦截的方法
RogerQianpeng的博客
10-21 2344
思路 很简单，原来在白名单中配置的是’/liveroom’这样的路由，现在配置为’liveroom’的名称，然后将导航守卫中的to.path改成to.name即可。这样’/liveroom/124235’或者更复杂的路径也都不会被拦截。 代码 含参的路由 白名单 导航守卫 ...
对于addRoute添加的路由，点击跳转进入404，在刷新时会白屏
yzwlogo的博客
05-27 692
【代码】对于addRoute添加的路由，点击跳转进入404，在刷新时会白屏。
vue动态添加路由，跳转页面时，页面报错路由重复： [vue-router] Duplicate named routes definition: {
z1712636234的博客
05-28 1万+
之前用了一个vue-element-admin做了一个小项目，里面用到了动态添加路由，动态展示侧边栏， 当我切换页面时，控制台总是警告提示路由重复，连续跳转几次页面后，控制台就被这些警告占满了， vue动态添加路由，跳转页面时，页面报错路由重复： 于是处理一下 原因addRoutes 方法仅仅是帮你注入新的路由，并没有帮你剔除原有的其它路由！ 我们先看一下原来代码 路由拦截器中的代码： permission.js: router.beforeEach((to, from, nex.
vue-router(3.5.1)源码梳理
Caristop3_走在前端这条大道上
04-09 3128
如何理解vue-router源码？ vue-router 源码分析 date: 2021-03-26 1. import Vue VueRouter 进来 2. 使用Vue.use(VueRouter) 来进行router的install -> 使用mixin混入每个组件钩子“beforeCreate”&“destroyed”
Vue Router动态路由版本排错
qq_41913447的博客
12-23 79
vue Router
vue3 多级动态路由
Cupid
08-05 2687
vue3 多级动态路由
【Vue】Router路由无法跳转问题整理
最新发布
Sheldon74的博客
09-08 1万+
Vue Router路由无效或异常等问题整理
Vue Router 实现动态路由和常见问题解决方案
良_123的专栏
03-08 5471
ue Router 实现动态路由和常见问题解决方案
Vue-router+Vuex动态加载路由与菜单权限控制实践
通过引入vuex进行状态管理，并利用vue-router的addRoutes方法，可以在运行时动态添加路由，从而简化解决方案。" 在构建后台管理系统时，动态加载路由和菜单权限控制是常见需求。通常，系统会先加载如登录页和404...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值