如果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标签的添加。
两种方法均可，个人比较推荐第二种啦
网友评论