一、一级路由设计
1、创建页面
案例在‘views’中创建了首页和登录两个页面
（1）首页
<script setup lang="ts"></script><template> <div> 首页 </div></template>（2）登录页面
<script setup lang="ts"></script><template> <div> 我的登录页面 </div></template>2、设置路由路径
（1）首先在src"下创建一个router文件夹，并在其中创建一个index.ts（或index.js如果你使用TypeScript）文件来定义路由。
（2）配置两个页面的路径
注意：首先要进行引入“
import Layout from ‘@/views/Layout/index.vue’
import Login from ‘@/views/Login/index.vue’”
import { createRouter, createWebHistory } from 'vue-router'import Layout from '@/views/Layout/index.vue'import Login from '@/views/Login/index.vue'const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL),//路由模式，默认 routes: [//路由配置 通过路由进行整体配置//数组，{ path:'/', component:Layout,},{ path:'/Login', component:Login,} ]})export default router//暴漏router对象，以便在Vue应用的入口文件中导入并使用它。3、配置路由出口
<template> <!-- 加载配置路由 --> <RouterView></RouterView></template>测试
首页
登录页面
二、二级路由设置
1、创建页面
（1）‘exams’页面设计
<template> <div>考试组件</div></template>（2）‘home’页面设计
<template> <div>首页组件</div></template>2、二级路由路径配置
（1）要先引入“Home”，“Exams”视图组件
import Home from '@/views/home/index.vue'import Exams from '@/views/exams/index.vue'（2）创建二级路由（children：[ ]）
import { createRouter, createWebHistory } from 'vue-router'import Layout from '@/views/Layout/index.vue'import Login from '@/views/Login/index.vue'import Home from '@/views/home/index.vue'import Exams from '@/views/exams/index.vue'const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL),//路由模式，默认 routes: [//路由配置 通过路由进行整体配置{ path:'/', component:Layout, children:[ { path:'/home', component:Home },{ path:'/exams', component:Exams } ]},{ path:'/login', component:Login,} ]})export default router（3）配置二级路由出口
<template> <div> 首页 <RouterView></RouterView> </div></template>（4）测试
‘home’组件测试
‘exam’组件测试