主要原因在于路径配置错误,多层嵌套子路由在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>
Logo

前往低代码交流专区

更多推荐