Vue的路由

一、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’属性声明路由的目标路径

  <router-link to="/about">ABOUT</router-link>
1

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

<router-view></router-view>
1

举例：

Home.vue组件：

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

<script>
export default {
  name: "Home"
}
</script>

<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13

About.vue组件：

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

<script>
export default {
  name: "About"
}
</script>

<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13

Router.js文件：

import {createRouter,createWebHashHistory,createWebHistory} from "vue-router";
import Home from "../components/Home.vue"
import About from "../components/About.vue";
import user from "../components/user.vue";
const routes = [
    {
        path:'/home',
        component:Home,
        name:'home'
    },
    {
        path:'/about',
        component:About,
        name:'about'
    }
]

//定义路由器

const router = createRouter({
        routes,
        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
26
27
28
29

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