菜鸡问个 vue 的问题， router 切换，该怎么切换页面啊？

[userdhf]

有三个页面，a b c， 看起来完全不一样，没啥好复用的 但是要求路径是 a>b>c

问题 1 使用嵌套路由实现 vs 我直接在路由的 path 写 /a , /a/b ,/a/b/c 有区别吗？

问题 2 如果使用嵌套路由的话，子页面会在 router-view 内出来，那页面上既有父页面内容又有子页面内容了，该怎么隐藏父页面内容？

问题 3 嵌套路由，是不是把各个页面封成一个组件，然后利用路由切换组件？那跟动态组件又有啥区别呢？那岂不是要在 vuex 和 store 里写一堆状态？

[shintendo]

你说的情况，应该分开写 /a , /a/b ,/a/b/c，并列写三条
嵌套路由针对的是 UI 界面的嵌套（比如父路由放导航+菜单，子路由放内容区），不是 url 的嵌套，你完全可以把两个 url 完全不同的页面嵌套起来

[userdhf]

@shintendo 谢谢大佬点拨...我是不理解产品的思路，为啥这么安排。而且看样子以后会根据这 3 个页面分别拓展子路由，想哭...

[wly19960911]

完全看起来不一样就别写嵌套路由了，

如果用简单的跟你说就是。（好久不写 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 楼说的导航菜单，根据业务需求，也可能是其他的。

[wly19960911]

@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/>

[userdhf]

@wly19960911 感谢，写的挺多，也都看懂了。。真不知道前端搞这么花哨干啥，还不是走后端的老路....

[xingyue]

问题 2：
<div class=''wrap">
<div v-if="$router.path === '/a' "></div> <!-- /a 内容 -->
<router-view></router-view> <!-- /a/b 内容 -->
</div>
ps：引用一楼：嵌套路由针对的是 UI 界面的嵌套不是 url 的嵌套~~~精辟，赞同。
但是遇到 “商场 /商品列表 /商品详情” 这种页面完全不一样，然而 url 就是有种嵌套的感觉，这么干可以满足强迫症。。。。。

[xingyue]

@xingyue #6 $route.path.....手误了

[userdhf]

@xingyue 感谢！这样写那不是相当于把路由的路径跟页面代码耦合了，将来改路由的时候，所有跟页面相关的都要改一遍？

[xingyue]

@userdhf 所以不建议这样做，我也是最近工作的项目赶进度的时候脑热瞎写的，等月末功能开发完了再回头去改（微博狗头~），不然以后维护的人肯定要骂我.....

[userdhf]

@xingyue 我看网上有说法是，约定大于规范，每个页面起名之后，在 store 里面存一个跟页面名字一致的变量作为控制该页面的显示隐藏，但也觉得麻烦。