美文网首页技术贴
vue 三级路由跳转页面不显示问题

vue 三级路由跳转页面不显示问题

作者: zhudying | 来源:发表于2022-05-26 13:52 被阅读0次

原因:与一二级路由共用 <router-view></router-view>
解决方法: 三级单独使用一个 <router-view</router-view>

1. 创建 index.vue 页面
// 单独给三级路由使用 的router-view
<template>
    <router-view></router-view>
</template>
2. 在路由的 二级路由的component 把文件地址指向 index.vue
     {
                path: '/schedule',
                name: '日程',
                component: () => import('../layout.vue'),
                children: [ 
                    {
                        path: '/schedule/children',
                        name: '日程儿子',
                        component: () => import('../index.vue'), // 二级路由的component指向index文件
                        children: [
                            {
                                path: '/schedule/children/children',
                                name: '日程孙子',
                                component: () =>  import('../schedule/children/children.vue'), 
                            },
                        ]
                    },
                ]
}

相关文章

网友评论

    本文标题:vue 三级路由跳转页面不显示问题

    本文链接:https://www.haomeiwen.com/subject/gybuprtx.html