有三个页面,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 就是有种嵌套的感觉,这么干可以满足强迫症。。。。。 |