一、Vue的路由

1、路由

路由：从源页面到目的页面的决策过程

2、前端路由

前端路由：在前端页面中维护的路由规则

(1)hash：在地址中以’#'分隔页面

(2)history：在地址中以’/'分隔页面

3、VueRouter路由

VueRouter路由 ：路由就是根据一个请求路径选中一个组件进行渲染的决策过程。是Vue官方推出的路由管理器。

(1)route：表示单个路由。

(2)routes：表示多个路由的集合。是一个数组，在这个数组中包含了多个route

(3)router：译为路由器.是route、routes的管理者。当用户点击某个按钮或超链接时,路由的查找过程是

三者关系： router --> routes --> route

4、VueRouter的组成

(1)VueRouter类：维护的一种路由表,根据路由的请求去渲染某个组件

(2)router-link：类似于标签。路由的链接组件

(3)router-view：路由出口,用于显示渲染的组件

5、VueRouter常用的函数：

(1)createRouter函数：创建路由器

(2)createWebHashHistory函数：创建Hash模式的路由

(3)createWebHistory函数：创建History模式路由

二、VueRouter的使用

1、安装vue-router

npm install vue-router

2、创建路由文件

(1)定义路由表：routes,在路由表中包含多个route

(2)创建路由器：router,在路由器中指定路由表(routes)以及路由模式(hash/history)

3、声明路由请求接口

声明路由请求接口：定义roter-link，'to’属性声明路由的目标路径

格式:ABOUT

4、声明路由出口

声明路由出口：指定组件渲染的位置

格式：

☀️举个实例：

Home.vue组件代码段：

<template>
<h2>我是home组件</h2>
</template>

<script>
export default {
  name: "Home"
}
</script>
1
2
3
4
5
6
7
8
9

About.vue组件代码段：

<template>
<h2>我是home组件</h2>
</template>

<script>
export default {
  name: "Home"
}
</script>
1
2
3
4
5
6
7
8
9

routers目录下的router.js文件：

import {createRouter, createWebHashHistory, createWebHistory} from "vue-router";
import Home from "../components/Home.vue";
import About from "../components/About.vue";
const rs = [   //定义路由表
    {
        path:'/home',
        component: Home,
        name: 'home'
    },
    {
        path:'/about',
        component: About,
        name: 'about'
    }
   
]

//定义路由器
const router = createRouter({
    routes:rs,
    history: createWebHistory()
})

//导出路由器
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

main.js代码段：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './routers/router'

const app=createApp(App)

app.use(router)

app.mount('#app')
1
2
3
4
5
6
7
8
9
10

App.vue代码段：

<script setup>
// This starter template is using Vue 3