<vue 路由 4、嵌套路由>

一、效果

点击about后，新闻和体育属于about的子路由调用的页面

知识点说明

路由里使用children属性可以实现路由的嵌套

三、代码结构

注：主要是标红的几个文件

四、代码

重新编写这几个文件中的代码

index.js

//引入路由
import {
	createRouter,
	createWebHistory
} from 'vue-router'
import Home from '../views/Home.vue'

//定义路由
const routes = [{
		path: '/',
		name: 'Home',
		component: Home
	},
	{
		path: '/about',
		name: 'About',
		component: () => import('../views/About.vue'),
		children: [{
				path: '',
				component: () => import('../views/AboutNews.vue')
			},
			{
				path: 'news',
				component: () => import('../views/AboutNews.vue')
			},
			{
				path: 'sport',
				component: () => import('../views/AboutSport.vue')
			}
		]
	}
]

//创建路由
const router = createRouter({
	//createWebHashHistory hash模式路径前面会多一个#号
	history: createWebHistory(process.env.BASE_URL),
	routes
})

//返回了路由
export default router

App.vue

Home.vue

About.vue

AboutNews.vue

AboutSport.vue