vue路由出口(router-view)为和路由入口(router-link)呈兄弟元素无法准确匹配跳转解决方案

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.最终效果