Vue|配置路由

一、一级路由设计

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’组件测试

注意：通过‘children：[ ]’即可创建二级路径，若想继续创建三级路径，只要在二级路径下继续添加‘children：[ ]’即可