demo\src\router\index.js
	import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"

	const routes = [
	    {
	        path: "/",
	        //alias:"/home", //定义别名 http://localhost:5173/home
	        alias: ["/home", "/index"], // http://localhost:5173/home http://localhost:5173/index
	        // component: () => import("../views/index.vue")
	        component: () => import("@/views/index.vue")
	    },
	    {
	        path: "/content", // 使用查询字符串传递参数 http://localhost:5173/content?id=100&title=邓瑞编程
	        component: () => import("@/views/content.vue")
	    },
	    {
	        path: "/user/:id/name/:name", // 使用路径传递参数 http://localhost:5173/user/007/name/邓瑞
	        component: () => import("@/views/user.vue")
	    },
	    {
	        //可选参数 name? 表示该参数不是必需的
	        path: "/userHistory/:id/name/:name?", // http://localhost:5173/userHistory/007/name
	        name: "history", // 定义路由名称
	        component: () => import("@/views/user.vue")
	    },
	    {
	        path: "/vip", 
	        component: () => import("@/views/vip.vue"),
	        children: [ // 子路由
	            {
	                path: '', // 默认页 http://localhost:5173/vip
	                component: import("@/views/vip/default.vue")
	            },
	            {
	                path: 'order', // 会员订单 http://localhost:5173/vip/order
	                component: import("@/views/vip/order.vue")
	            },
	            {
	                path: 'info', // 会员资料 http://localhost:5173/vip/info
	                component: import("@/views/vip/info.vue")
	            }
	        ]
	    },
	]

	const router = createRouter({
	    // 使用url的#符号之后的部分模拟url路径的变化,因为不会触发页面刷新,所以不需要服务端支持
	    // history: createWebHashHistory(), 
	    history: createWebHistory(),
	    routes
	})

	export default router


demo\src\views\vip.vue
	<script setup>
	  //导入子组件
	  import Header from "@/components/header.vue"
	  import Footer from "@/components/footer.vue"
	</script>

	<template>
	    <!-- 共享的Header组件 -->
	    <Header/>

	    <!-- 根据不同的子路由加载不同子页面 -->
	    <router-view />

	    <!-- 共享的Footer组件 -->
	    <Footer/>
	</template>

	<style scoped>

	</style>

demo\src\views\vip\default.vue
	<script setup>

	</script>

	<template>
	    会员默认页
	</template>

	<style scoped>

	</style>

demo\src\views\vip\order.vue
	<script setup>

	</script>

	<template>
	    会员订单
	</template>

	<style scoped>

	</style>

demo\src\views\vip\info.vue
	<script setup>

	</script>

	<template>
	    会员资料
	</template>

	<style scoped>

	</style>

demo\src\components\header.vue
	<script setup>

	</script>

	<template>
	    <h3>header</h3>
	</template>

	<style scoped>

	</style>

demo\src\components\footer.vue
	<script setup>

	</script>

	<template>
	    <h3>footer</h3>
	</template>

	<style scoped>

	</style>