Vue路由配置-嵌套路由

目录结构

film.vue

<template>
	<div>
		<ul>
			<li>加载show组件</li>
			<li>加载comingsoon组件</li>
		</ul>
		<!--路由容器-->
		<router-view></router-view>
	</div>
</template>

<script>
</script>

<style>
	ul {
		display: flex;
	}

	li {
		flex-grow: 1;
	}
</style>

index.js

import Vue from "vue";
// 从vue-router里面导入VueRouter
import VueRouter from "vue-router";
//导入相关组件
import film from "@/views/film.vue"
import center from "@/views/center.vue"
import cinema from "@/views/cinema.vue"
import show from "@/views/film/show.vue"
import comingsoon from "@/views/film/comingsoon.vue"
//注册模块
Vue.use(VueRouter);

const routes = [{
		//路径
		path: "/film",
		//组件
		component: film,
		//嵌套路由
		children: [{
				path: "show",
				component: show
			},
			{
				path: "comingsoon",
				component: comingsoon
			},
		]
	},

	{
		path: "/center",
		component: center
	},
	{
		path: "/cinema",
		component: cinema
	},
	{
		path: "*", //通配符
		redirect: "/film" //重定向
	}
]

const router = new VueRouter({
	routes: routes
})

export default router

效果展示，http://localhost:8080/#/film/show会在film下展示其子组件show