admin管理员组

文章数量:1633739

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

 

本文标签： 路由跳转入口元素准确

版权声明：本文标题：vue路由出口(router-view)为和路由入口(router-link)呈兄弟元素无法准确匹配跳转解决方案 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1729174615a1188559.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。