vue-router 嵌套路由没反应

Posted 小虫虫

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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
都可以访问了。

以上是关于vue-router 嵌套路由没反应的主要内容,如果未能解决你的问题,请参考以下文章

Vue-Router(三):嵌套路由

Vue-router 子路由(嵌套路由)

Vue-router 子路由(嵌套路由)

07. vue-router嵌套路由

vue-router路由嵌套与二级路由重定向

Vue第七天学习笔记之vue-router详解