VueRouter多层嵌套路由

大家好,我在使用VueRouter的时候遇到了一些问题,恳请大家帮忙协助下小弟
问题描述:
我还处在摸索Vue的路上,我想实现的功能是:
this.$router.push(’/user/center/password/forget’) 的时候跳转到 PasswordForgetPage 这个页面
this.$router.push(’/user/center/password’) 的时候跳转到 PasswordPage 这个页面
我希望的是 [PasswordPage] 界面跟 [PasswordForgetPage] 的内容是分开的,但是我在使用的过程中发现,如果 PasswordPage 如果有内容,那么 this.$router.push(’/user/center/password/forget’) 的时候, PasswordForgetPage 页面也会出现
PasswordPage 的内容
问题截图:

PasswordPage页面 :

PasswordForgetPage页面 :

代码:

vur-router 相关的引用组件部分代码

UserPasswordPage 页面代码

UserPasswordForgetPage 页面代码

UserPasswordPage 里面的router-view 去掉

您好,如果 UserPasswordPage 去掉后,vue-router 没办法 进入到 PasswordForgetPage 页面了,我在网上搜索看到有解释说是必须要有一个 <router-view/ >接收,那么children的组件才能进入。

这就是你乱用路由嵌套的后果,嵌套就是一个包含的关系,你这样套个十八层肯定是内容一级比一级多。写得太复杂了,都是页面级别的组件,你硬生生得套在一起。写到后面哪跟哪你都不知道。拆了重写吧,捋清页面之间的上下级关系再用路由嵌套

1 Like

router 的结构不是这样设计啊,按你这样写就是这个效果,要把两个router放在同一级,然后去掉UserPasswordPage的routerview

您好,您的意思是 vue-router 的children是不支持
在 同一个页面 children 定义关联子页面的吗?
/url1/url2/url3
/url1/url2url33
这种写法的吗?
再请教您一下,是否 vue-router 的每个独立页面都不能是 children 下的组件呢?

您好,children 是嵌套,我之前误以为是 路由url地址继承的。谢谢您的指导!

不客气,我也在学习,共勉

不知道怎么说,丢个代码你看看显示就明白了。https://github.com/mkinit/fe-example/blob/master/demo.html

要达成这种路径的效果,可以

// `/user/center/password`
children: [
    { path: '',  ...{} },
    { path: 'forget', ...{} },
  ]

感谢您的代码!我最近工作上比较忙,所以今天才看到您的回复。我当初主要是误以为children是可以父节点的path,所以导致我再这方向上出错了,看了您的代码之后我已经明白router的children的正确用法了,谢谢您!

您好,我这边的期望是,/user/center/password是一个页面, /user/center/password/forget 是另外的一个页面,而不是 /user/center/password/forget 挂载到 /user/center/password 下面。

额,这样就是同级的。。。

// `/user/center/password` // 这个是空的节点,只有 router-view 的
children: [
    { path: '',  ...{} }, // 访问 `/user/center/password` 会匹配到这个
    { path: 'forget', ...{} }, // 这个是 `/user/center/password/forget`
  ]
1 Like

:joy_cat:得救了,谢谢大佬!!!!