这是一个创建于 2026 天前的主题，其中的信息可能已经有所发展或是发生改变。
有三个页面，a b c， 看起来完全不一样，没啥好复用的 但是要求路径是 a>b>c
问题 1 使用嵌套路由实现 vs 我直接在路由的 path 写 /a , /a/b ,/a/b/c 有区别吗？
问题 2 如果使用嵌套路由的话，子页面会在 router-view 内出来，那页面上既有父页面内容又有子页面内容了，该怎么隐藏父页面内容？
问题 3 嵌套路由，是不是把各个页面封成一个组件，然后利用路由切换组件？那跟动态组件又有啥区别呢？那岂不是要在 vuex 和 store 里写一堆状态？
 |
1
shintendo 2019-05-08 15:13:38 +08:00
你说的情况，应该分开写 /a , /a/b ,/a/b/c，并列写三条
嵌套路由针对的是 UI 界面的嵌套（比如父路由放导航+菜单，子路由放内容区），不是 url 的嵌套，你完全可以把两个 url 完全不同的页面嵌套起来 |
 |
2
userdhf OP @shintendo 谢谢大佬点拨...我是不理解产品的思路，为啥这么安排。而且看样子以后会根据这 3 个页面分别拓展子路由，想哭...
|
 |
3
wly19960911 2019-05-08 15:22:57 +08:00
完全看起来不一样就别写嵌套路由了，
如果用简单的跟你说就是。（好久不写 vue 了，随便写点伪代码吧，别吐槽） <route-view href='/a'> <route-view href=''></route-view> /* /a/b, /a, /a/c */ <route-view/> 三个页面分开来渲染。你问和动态组件有什么区别？你需要自己维护路由，你需要自己来处理路由的参数和各种逻辑。 嵌套路由的场景是 <route-view href='/a'> <other-component></other-component> <route-view href=''></route-view> /* /a/b, /a, /a/c */ <route-view/> a 页面某些组件在通过 a 页面路由一定要保留的组件。比如 1 楼说的导航菜单，根据业务需求，也可能是其他的。 |
|
4
wly19960911 2019-05-08 15:25:10 +08:00
@wly19960911 我写错了，刚刚写着写着改了下忘记改了，第一个应该是
<route-view href=''></route-view> /* /a/b, /a, /a/c */ 第二个是 <route-view href='/a'> <other-component></other-component> <route-view href=''></route-view> /* /a/b, /a/c， 少了 /a */ <route-view/> |
|
5
userdhf OP @wly19960911 感谢，写的挺多，也都看懂了。。真不知道前端搞这么花哨干啥，还不是走后端的老路....
|
 |
6
xingyue 2019-05-08 19:14:37 +08:00
问题 2：
<div class=''wrap"> <div v-if="$router.path === '/a' "></div> <!-- /a 内容 --> <router-view></router-view> <!-- /a/b 内容 --> </div> ps：引用一楼：嵌套路由针对的是 UI 界面的嵌套不是 url 的嵌套~~~精辟，赞同。 但是遇到 “商场 /商品列表 /商品详情” 这种页面完全不一样，然而 url 就是有种嵌套的感觉，这么干可以满足强迫症。。。。。 |
Select Language