Vue路由嵌套，跳转时页面错乱

最新推荐文章于 2023-07-06 19:04:24 发布
最新推荐文章于 2023-07-06 19:04:24 发布
阅读量2.2k 收藏 6
点赞数 2
分类专栏： Vue.js 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41944038/article/details/116494980
版权

今天遇到一个奇怪的问题，频繁切换后台管理的菜单，路由跳转会错乱，url对了但是显示的页面不对。奇奇怪怪的问题，也不知道咋引起的，随便乱点了许久才发现，是因为点击了某个页面，然后跳转其它页面就一定会出现问题。

此次项目的菜单时嵌套了三层的。
在这里插入图片描述
导致问题的罪魁祸首是途中标的，一个二级菜单
在这里插入图片描述
后来找了其再router.js里面的写法：
在这里插入图片描述
看了下同事写的路由规则
在这里插入图片描述
改成
在这里插入图片描述
问题解决了！

testPage里面就是一个承载二级路由的router-view…

出错的原因是为啥呢…待我再研究研究vue的嵌套路由…

目前研究出来的原因：
testPage用<keep-alive></keep-alive>做了缓存，如果直接写根路由，页面会被缓存，然后再点击其它路由，显示的就还是缓存的这个页面。

写的有点语无伦次…因为不知如何表达

总之经过测试，大概就是keep-alive缓存造成的。

无人公寓里的猫
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue 页面闪烁的问题_vue项目解决路由跳转页面闪烁问题(过度动画)
weixin_32848231的博客
01-13 4987
1.问题描述:页面跳转是出现卡顿感，闪烁感明显，降低用户体验。2.解决方案：利用动画缓解页面跳转闪烁感3.具体实现export default {data() {return {};},components: {},mounted() {},methods: {}};/*enter-active 定义进入过渡的结束状态leave-active 定义离开过渡的结束状态*/.fade-transfor...
vue 路由跳转，导致页面样式错乱，刷新又好了的情况
qq_45817647的博客
04-21 1306
vue 路由跳转，导致页面样式错乱，刷新又好了的情况 最近在进行vue开发的时候遇到了如题这样烦人又不知道怎么解决的问题：在页面跳转的时候总有几个页面，在跳到该页面时样式全错位了，但是刷新一下就又好。 查了查网上的说法几乎都是style加scoped使其样式唯一，但我的页面导入样式写的时候就都加过scoped了，未能解决问题。绞尽脑汁，最终在室友的帮助下解决了，在此记录一下。 方案一：同各大佬说的一样，在页面style里加入scoped <style scoped> @import "hom
vue-element-admin 三级路由无法跳转
Mr-k的博客
12-20 7482
vue-element-admin自带的有嵌套路由，不过他的嵌套路由有一个套路，那就是二级路由页面下有个<router-view />标签 //二级路由 <el-alert :closable="false" title="menu 1"> <router-view /> </el-alert> 这里说一下，这里的三级路由指向了一个页面...
vue中的路由2-----嵌套路由跳转，传参和路径记录问题
不想内卷的博客
09-12 597
vue路由如何传参的问题 这篇文章分为两个部分， 第一个是怎么传过去 第二个是怎么接收信息 在学习之前我们要了解一下路由跳转的规则 （1）路由跳转相当于一个栈，你每跳一次就往栈添加一条数据，所以你可以按返回按钮返回到上一个页面，你也可以通过添加replace的方法，这个相当于跳转的时候，将路径记录的栈的第一条换掉成最新的一条，当你点击返回上一个页面按钮的时候就不能跳转到刚刚那个页面了 （2）跳转路由有两种不同的传参方法，一种将数据放在query上，一种放在params上，但无论哪一种，这些方法都是属于t
vueRouter mode模式不同 页面刷新
kilito_01的博客
06-01 230
路由模式不同 路由鉴权问题 页面刷新问题
vue 实现路由跳转时更改页面title
10-16
今天小编就为大家分享一篇vue 实现路由跳转时更改页面title，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue路由拦截及页面跳转的设置方法
08-27
Vue 路由拦截及页面跳转的设置方法 Vue 路由拦截及页面跳转的设置方法是 Vue 应用程序中常见的需求，本文将详细介绍如何实现路由拦截及页面跳转的设置。 一、路由设置 在 Vue 中，我们可以使用 Vue Router 库来...
Vue实现路由跳转和嵌套
08-30
Vue 实现路由跳转和嵌套 在 Vue 中实现路由跳转和嵌套是非常重要的，今天我们将介绍如何使用 Vue 实现路由跳转和嵌套。首先，我们需要安装 Vue Router，使用以下命令安装：`cnpm i vue-router -D` ### 配置路由 ...
vue路由跳转时页面上下抖动问题解决
seeeeeeeeeee的博客
11-19 4533
问题：路由切换跳转到一个页面然后会发现这个页面的布局会先向下闪一下，然后向上闪一下停住。虽然不影响使用，但是看着非常膈应。 原因：其实就是因为路由跳转时有过度效果导致的在跳转的时候上一个路由还占着位置，所以把你布局顶下去了，然后页面跳转完了之后他占位消失，你的布局恢复原状。但是这样虽然只有一秒不到的时间，也造成了布局上下闪了一次，看着就很难受。所以我们想的办法也很简单，就是让他上一个路由消失的时候别占着位置顶我下一个路由的布局不就好了。 解决办法 在你的css中找到fade-leave-to这个属性，然后加
Vue页面刷新时路由异常跳转怎么解决？——vue踩坑之路
weixin_48648219的博客
04-24 2053
Vue页面刷新，路由异常跳转 ——Vue踩坑之路问题描述：原因分析：解决方案： 问题描述： 今天做项目的时候，遇到了一个坑：在项目任何一个页面刷新时，都会莫名其妙跳转到name为‘startS_right’的路由中，导致页面无法正常刷新。 原因分析： 于是我去检查了路由，发现出错部分的路由部分代码如下： { path: "/:choice/:canshu", component:start, name:'start', children: [ { path:
若依v3.2问题解决：菜单路由不匹配 / 跳转路由页面空白
最新发布
喜大普奔
07-06 2404
结果测试发现是router-view下的＜transition/＞标签添加“out-in“,导航到其他画面为空白。菜单路由不匹配 ，在菜单管理中匹配代码中的相应组件，可是在页面上总是报匹配错误，下面是报错情况和相关数据库。因为店铺管理是一个目录，而店铺详情和店铺列表是菜单，路由规则中目录要有一个菜单匹配，也就是path也相同。若依用router跳转路由时，页面白屏，，虽然比之前少了点效果，但bug解决了。
【vue-router】关于在vue3项目中使用vue-router碰到的坑(路由跳转但是页面不更新)
RanDoll_的博客
05-22 7765
首先来说第一个问题，解决思路很简单，就是在路由跳转的时候重新加载组件嘛，只需要给router-view添加一个和路由变化时相关的key就可以了，这样在渲染虚拟dom的时候算法就会判断两次的组件是有区别的，虽然看起来很简单，但是作者一开始没想到这个地方，使用了状态管理器，自定义事件等等方法，现在想来这些方法有些还是能成功奏效的，但是由于第二个问题的存在，这些问题都失败了。
路由的异步加载、跳转界面
weixin_43162630的博客
07-02 455
VUE项目实战（侧重路由） 第一步（页面跳转） 路由配置 路由的异步加载（懒加载） 本文以跳转网页为例，如果你跳转网页，网址是变化的，但内容不变，那99%的可能是路由的配置问题。以下是router/index.js的代码： import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', n
vue-router 路由跳转页面位置不对 应显示顶部的解决办法
前端一线搬运工的博客
12-19 1684
解决办法一: 在main.js 中添加代码 router.afterEach((to, from, next) => { window.scrollTo(0, 0) }) 解决办法二 在路由文件夹的index.js里添加scrollBehavior export default new Router({ routes: [{...}], scrollBehavior(to, ...
Vue 跳转路由时中断异步请求
CSU_Zipple的博客
12-24 2964
使用导航守卫 在router/index.js中增加前置守卫： router.beforeEach(function (to, from, next) { store.state.data.requests.forEach(xhr=&amp;gt;xhr.abort());//data是我的模块名 store.state.data.requests =[]; next(); }); 在rou...
vue 路由跳转出的错误
小白成长记
12-09 820
vue NavigationDuplicated: Avoided redundant navigation to current location: "/template" 报错原因： 路由设置为子路由，页面里直接页面跳转。 其实是一个低级错误，向子路由跳转，父级页面要写 <router-view> ...
vue通过router地址传参跳转同一路由页面，页面不刷新的解决办法
weixin_54122176的博客
03-14 4749
记录一下最近遇到的vue路由页面间的跳转的问题，其中就涉及到了不同路由的跳转（/a/b1 => /a/b2）、相同路由不同参数间的跳转（/a/b?c=2）、相同页面锚点跳转（/a/b#id1 =>/a/b#id2）解决：可以在不刷新的页面通过监听route,重新加载数据。原因：渲染的是同一组件。
vue-element-dialog 内外两层dialog 内层dialog第二次打开显示不正常的问题
R_DarkNight的博客
09-21 2413
问题描述 : Q1:外层dialog 打开内层dialog ,第一次打开内层正常,第二次打开内层失效,关闭外层dialog才显示内层dialog. Q2:外层dialog打开内层dialog,第二次打开遮障出错. 问题原因 A1:没有加modal-append-to-body 跟append-to-body属性. A2:内层dialog没有真正关闭 解决方法 1.父(外)层 dialog加 :modal-append-to-body="false" 子(内)层dialog...
vue-router实现页面路由跳转以及路由嵌套
05-18
Vue Router 提供了以下两种方式实现页面路由跳转： 1. 声明式导航：通过 `<router-link>` 组件实现页面跳转，该组件会被渲染成一个 `<a>` 标签，点击该标签后会触发路由跳转。 2. 编程式导航：通过 `$router` 对象...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值