嵌套路由机制(url改变了,但是页面没有加载子组件)

2019-07-11  本文已影响0人  有一个程序媛

如果url为localhost:8080/#/A 的话,页面会对应渲染A组件的内容

如果url为 localhost:8080/#/A/B 的话,页面还是会对应渲染A组件的内容

原因是什么呢,解决方案有两种?

1.router.js的配置

{

      path: '/A',

      name: 'A',

      component: A,

       children: [{

         path: 'B',

         name: 'B',

         component: B

       }

       ]

    }

用children来描述子路由的话,是需要在父级页面A中写router-view标签用来承载B页面,如果不写的话,router-view的匹配机制只会往下寻找一个路由页面,不再寻找第二个,这是后就只会加载A页面,不会加载B页面,所有我们需要在A.vue中写<router-view></router-view>,与此标签平级的div即为A页面的内容,用if else判断是否显示

2.router.js的配置

{

      path: '/A/B',

      name: 'B',

      component: B

    },

    {

      path: '/A',

      name: 'A',

      component: A

    }

这样把子页面的路由写在父页面前面的话,路由匹配就从上往下找,会先找到子页面,这样子页面就可以成功显示啦,如果子页面不写在父页面的上面 localhost:8080/#/A/B这个url是会先匹配到A组件的,所以会一直显示A页面,无法调转到B页面。这样也可以减少vue文件中多余的router-view标签的添加。

两种方法均可,个人比较推荐第二种啦

上一篇下一篇

猜你喜欢

热点阅读