vue 同一个页面路由无反应_vue-router 嵌套路由没反应

先看下route.js

//route.js

const App = () => import('../App.vue');

const Login = () => import('../component/Login.vue');

const Class = () => import('../component/Class.vue');

const CourseList = () => import('../component/CourseList.vue');

const CourseContent = () => import('../component/CourseContent.vue');

const routers = [{

path:'/',

component:App,

children:[{

path:'login',

component:Login

},{

path:'class',

component:Class

},

{

path:'course',

children:[{

path:'list',

component:CourseList

},{

path:'content',

component:CourseContent

}

]

},

]

}]

export default routers

当你访问的时候，发现

http://localhost:8080/#/login

http://localhost:8080/#/class

都正常，但是：

http://localhost:8080/#/course/list

http://localhost:8080/#/course/content

都是一片空白，检查元素，发现没有加载过来。检查，子路由前面并没有加/,所以这没有问题，排除。

其实这是list的父级course没有component，有了componnet,并且需要在这个component理要有,修改下：

{

path:'course',

component:Course

children:[{

path:'list',

component:CourseList

},{

path:'content',

component:CourseContent

}

]

},

Course.vue如下：

这样就可以实现嵌套了。想想，本例子中，其实App组件也是这样的，他提供了个，对不对？

http://localhost:8080/#/course/list

http://localhost:8080/#/course/content

都可以访问了。