嵌套路由

适用范围

• 优点:
  • 当一个子组件出现时，必定与其父组件一同出现
  • 页面与URL绑定时
  • 易于跳转
• 特点:
  • 匹配一个子路由, 会自动匹配其父路由
    • 实例
• 缺点
  • 组件间的父子关系独立于组件外部，由路由定义的
    • 逻辑分离，容易出错

实例

路由定义

import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
	history: createWebHistory(),
	routes: [
		{
			path: '/', component: () => import('@/components/home-route.vue'), children: [
				{
					path: 'a', component: () => import('@/components/a-route.vue'), children: [
						{ path: 'b', component: () => import('@/components/b-route.vue') },
					]
				}
			]
		}
	]
})
export default router

路由组件定义

home:

<template>
  <p>Home Route</p>
  <router-view />
</template>

a:

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

b:

<template>
  <p>I' m b-route</p>
</template>

效果图

当路径为localhost:5137/a/b时