1.问题背景

如图所示，路由出口和入口为兄弟元素，页面还有其它路由，会发生子级路由不能准确匹配，无法渲染数据   

 

2.踩坑记录

布局页面，设置 "router-link" 和 "router-view"

配置路由

页面效果

 

3.解决方案

   设置路由出口时，给router-view，设置name属性 

<!--路由出口--> <transition name="el-fade-in-linear"> <div class="main-content"> <router-view name="mainArea"/> /* 设置路由出口时，给router-view，设置name属性 */ </div> </transition>

  配置路由跳转:使用components，name/default:component (此处语法使用详情：vue嵌套命名视图)

routes: [ { path: '/', /*重定向*/ redirect: Index }, { path: '/index', name: 'index', component: Index, children: [ { path: 'mainContent', components:{ mainArea:mainContent /*使用components，name/default:component*/ } } ] } ]

 

4.最终效果