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理要有<router-view></router-view>,修改下：

{ 
path:'course',
component:Course
children:[{
path:'list',
component:CourseList
},{
path:'content',
component:CourseContent
}
]
},

Course.vue以下：

<template>
<div>
<router-view></router-view>
</div>
</template>

　　

這樣就能夠實現嵌套了。想一想，本例子中，其實App組件也是這樣的，他提供了個<router-view></router-view>，對不對？

http://localhost:8080/#/course/list
http://localhost:8080/#/course/content
均可以訪問了。