vue多层嵌套子路由不显示

Dosage de fleurs

已于 2023-09-20 16:58:43 修改

阅读量1k

点赞数 1

文章标签： vue.js javascript 前端

于 2023-09-20 16:58:11 首次发布

本文链接：https://blog.csdn.net/weixin_44032244/article/details/133087937

版权

主要原因在于路径配置错误，多层嵌套子路由在router中配置时，其路径为“父组件路径+子组件路径”，例如在下例中：

const routes = [
    {
        path: "/",
        name: "Home",
        component: Home,
        children:[
            {
                path:'schedule/',
                name:'Schedule',
                component:() => import('@/views/schedule/Schedule.vue')
                children:[
                    {
                        path:'daily',
                        name:'Daily',
                        component:() => import('@/views/schedule/components/Daily.vue')
                    },
                    {
                        path:'weekends',
                        name:'Weekends',
                        component:() => import('@/views/schedule/components/Weekends.vue')
                    }
                ]
            }

        ]
    }
]

组件Weekends的路由为“/schedule/weekends”，要在父组件中渲染需要配置router-link（访问链接，相当于html中的标签）及router-view（渲染子组件中的内容）：

  <div><router-link to="/schedule/daily">daily</router-link></div>
  <div><router-link to="/schedule/weekends">weekends</router-link></div>
  <router-view></router-view>