V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
userdhf
V2EX  ›  问与答

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

  •  
  •   userdhf · 2019-05-08 15:05:35 +08:00 · 1609 次点击
    这是一个创建于 2015 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    10 条回复    2019-05-09 10:46:59 +08:00
    shintendo
        1
    shintendo  
       2019-05-08 15:13:38 +08:00
    你说的情况,应该分开写 /a , /a/b ,/a/b/c,并列写三条
    嵌套路由针对的是 UI 界面的嵌套(比如父路由放导航+菜单,子路由放内容区),不是 url 的嵌套,你完全可以把两个 url 完全不同的页面嵌套起来
    userdhf
        2
    userdhf  
    OP
       2019-05-08 15:20:34 +08:00
    @shintendo 谢谢大佬点拨...我是不理解产品的思路,为啥这么安排。而且看样子以后会根据这 3 个页面分别拓展子路由,想哭...
    wly19960911
        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 楼说的导航菜单,根据业务需求,也可能是其他的。
    wly19960911
        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/>
    userdhf
        5
    userdhf  
    OP
       2019-05-08 17:57:17 +08:00
    @wly19960911 感谢,写的挺多,也都看懂了。。真不知道前端搞这么花哨干啥,还不是走后端的老路....
    xingyue
        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 就是有种嵌套的感觉,这么干可以满足强迫症。。。。。
    xingyue
        7
    xingyue  
       2019-05-08 19:16:29 +08:00
    @xingyue #6 $route.path.....手误了
    userdhf
        8
    userdhf  
    OP
       2019-05-08 19:39:59 +08:00
    @xingyue 感谢!这样写那不是相当于把路由的路径跟页面代码耦合了,将来改路由的时候,所有跟页面相关的都要改一遍?
    xingyue
        9
    xingyue  
       2019-05-08 21:49:17 +08:00 via Android
    @userdhf 所以不建议这样做,我也是最近工作的项目赶进度的时候脑热瞎写的,等月末功能开发完了再回头去改(微博狗头~),不然以后维护的人肯定要骂我.....
    userdhf
        10
    userdhf  
    OP
       2019-05-09 10:46:59 +08:00
    @xingyue 我看网上有说法是,约定大于规范,每个页面起名之后,在 store 里面存一个跟页面名字一致的变量作为控制该页面的显示隐藏,但也觉得麻烦。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5474 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 01:28 · PVG 09:28 · LAX 17:28 · JFK 20:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.