嵌套路由问题（子路由路径无法跳转，还是显示父路由）

最新推荐文章于 2025-05-13 13:40:06 发布
最新推荐文章于 2025-05-13 13:40:06 发布
阅读量8.4k 收藏 3
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41033048/article/details/88556472
本文详细介绍了在Vue项目中如何正确配置子路由，并确保在父组件中通过<router-view>标签正确显示子路由组件。重点讲解了user组件下profile和posts两个子路由的设置方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

官方文档的写法：
在这里插入图片描述
这里要注意的是，user有两个子路由，分别是profile和posts,如上图设置之后，需要在user.vue里面设置<router-view></router-view>才能显示跳转的子路由页面。

叶川飞流
关注
react中嵌套路由以及默认显示二级路由
kanno的博客
07-23 760
react中嵌套路由以及默认显示二级路由
关于解决vue3嵌套路由跳转后页面路由跳转正常但不走生命周期（白屏）强制刷新后正常
Evi7seve的博客
02-21 385
3 .判断router要跳转的路由组件是否 template标签中 根是否包含多个子元素（如有则将其用一个大标签包裹），其次 tempate根下紧接着是否有代码注释，如有则放到子标签中或删除。：（这个键值每次路由变化时都更新，强制Vue销毁旧的组件实例并创建一个新的实例。组件就会进行完整的重新挂载过程，其内部的数据绑定也会随之更新，从而达到刷新页面的效果）问题：vue3页面跳转成功，且页面路由层级嵌套，router.push跳转后页面白屏，刷新后正常。三步走战略走完，基本解决99的问题！
vue在App.vue文件中监听路由变化刷新页面操作
10-14
主要介绍了vue在App.vue文件中监听路由变化刷新页面操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue父路由跳转到子路由时，路径变化但页面不改变，仍然为父页面的解决办法
前端小白, 稀土：雩风十六
07-09 6161
项目中遇到了这样一个问题：我想要从父页面跳转到子页面然后在父页面中通过进行跳转，想要的结果是跳转后父路由区域替换为子路由，但是实际结果却是路径改变了，面包屑也更新了，控制台里也显示触发了子路由的mounted钩子里的方法，但是页面仍然是父页面没有替换为子页面。
Vue3路由：嵌套路由系统(4)
最新发布
caishuangxi111的博客
05-13 642
想象走进一家大型购物中心，每层楼都有不同的主题分区。一层是化妆品区，走进这层会发现内部又细分为护肤品专柜、彩妆专柜、香水专区。这种"楼层套分区"的结构，正是嵌套路由的生动体现。父路由承载公共布局（如楼层导览图）子路由展示具体内容（如专柜位置）URL路径自动拼接（如。
vue router 子路由显示父路由页面bug处理
Marin6的博客
12-28 3311
vue router 子路由显示父路由页面bug处理。 1.场景 父路由不需要内容，只是单纯切换children中的子路由。 2.错误代码 父路由绑定了一个大页面的组件，导致切换到子路由地址时，仍然显示父级路由。 3.解决 父路由绑定一个空的router-view，可以通过render直接渲染。 4.总结 a.路由嵌套时，不需要父路由内容仍然要给父路由绑定component，不然不会显示子路由页面。 b.路由嵌套时，不需要父路由内容时，父路由可以绑定空的router-view。通过render渲染一个标
嵌套路由中，子页面中看见父页面元素的解决办法?
m0_46693606的博客
05-13 631
之前父子路由的页面嵌套都是照套路走的，像下面这样： 一个嵌套路由 跳转传值的套路如下： 但是，出问题了！ 父页面比子页面长，一旦滚动，子页面挡都挡不住呀！大概就像下面这样： 这种情况当然是自己作的，解决办法很简单。 把父子页面的总高度都设置为一个屏幕并不能滚动，即height：100vh; overflow:hidden;，再在内部设置滚动。 </div> .addNewGoods { width: 100%; height: 100vh; overflow: scroll; }
多级路由 子路由跳转空白 （vue 路由children失效）
Myqqlady的博客
06-15 4211
搭建一个后台管理项目 遇到了多级路由的情况 1.这个是页面目录 2.这是router里的index.js文件 完全没毛病 路由是跳转了 但页面却是空白 找了好久 发现问题了 需要在父级路由页面里添加一个 router-view标签就完全没问题了 就是这样解决了这个问题 ...
Vue实现路由跳转和嵌套
08-30
Vue 实现路由跳转和嵌套 在 Vue 中实现路由跳转和嵌套是非常重要的，今天我们将介绍如何使用 Vue 实现路由跳转和嵌套。首先，我们需要安装 Vue Router，使用以下命令安装：`cnpm i vue-router -D` ### 配置路由 ...
Vue教程：掌握路由跳转与嵌套路由实践
本文档详细介绍了如何在Vue项目中实现路由跳转和路由嵌套。首先，我们从Vue CLI项目的初始化结构开始，由于默认模板不包含vue-router，需要通过npm安装`vue-router`。在`src`目录下创建`routers.js`文件，用于定义...
vue2路由方式--嵌套路由实现方法分析
10-15
如果路径配置错误，可能会导致子路由无法正确显示或者出现404错误。 5. 模板定义：文件中也展示了如何定义组件的模板。我们可以使用 `template` 属性直接嵌入 HTML 代码，也可以通过引用外部的 HTML 模板文件来定义...
RouterLink设置路由跳转，页面地址已经更新但是页面没有跳转
weixin_48823116的博客
07-05 2662
RouterLink设置路由跳转，页面地址已经更新但是页面没有跳转
Vue路由（vue-router）03（子路由）
heyuqing32的博客
12-15 710
对于单页面的vue应用，子路由的配置可能是必不可少的，其实vue的子路由配置很简单。这篇文章是基于上一片文章（路由配置02）的。 示例需求，早footer.vue模块中配置子路由（示例文件footer01.vue和footer02.vue）。 1. 在components文件夹下新建一个children文件夹，在其中新件子路由文件。（children文件夹名称不限制，子路由文件的位置不限制，可...
Vue学习笔记-Router死活跳不过去子路由
qq_33518733的博客
12-06 1598
vue-router踩坑记录，死活跳转不到子路由上面去
vite 多页面应用刷新页面时，不会在当前路由中，会返回到根路由
左不言的博客
07-27 1285
vite 多页面应用刷新页面时，不会在当前路由中，会返回到根路由 多页面应用刷新问题
vue路由跳转了但是页面组件没变
web8_zhy的博客
04-14 4377
1.菜单用的是elementui的menu组件，index的值不能重复 2.如果index没重复，但还是不变。试着在APP.vue里面的routerview标签加上key
vuerouter子路由跳转脱离父页面
weixin_44825765的博客
08-23 1005
我希望点击商品统计，dashboard出现在页面右下方。 但是遇到的问题是：点击商品统计，直接跳转新页面。 原因:注册动态路由时，往main中添加子路由，但是没有给main映射添加名字。所以浏览器控制台查看组件会发现，点击商品统计，会挂载新的app组件。丢失侧边，头部内容。 解决：给main映射添加名字 ...
路由嵌套,子路由页面不单独显示
走在秃头的路上的博客
04-24 1623
想点击创建账户后,跳到创建账户页面,但是发现跳转后,创建账户页面和富文本页面同时存在,因此就要隐藏掉富文本页面 试验过v-show绑定一个值,点击创建账户改变值,但是发现一跳转页面还是会显示,后来找到解决方法是,在router里给父路由加上参数 然后在computed计算属性里加一个函数, toggleShow: function() { return this.$route.meta.sho...
vue路由router从父页面跳转子页面，父页面隐藏
qq_40798486的博客
09-01 3786
首页路由中 { path: "/", meta: { title: "电子说明书", icon: "menu", hideInMenu: true, index: 0, showFooter: true//使用这个，显示隐藏 }, component:
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值