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：类似于<a>标签。路由的链接组件

（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>

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

<router-view></router-view>

举例：

Home.vue组件：

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

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

<style scoped>

</style>

About.vue组件：

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

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

<style scoped>

</style>

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

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')

App.vue：

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
   <router-link :to="{name:'home'}">Home</router-link>
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    <router-link :to="{name:'about'}">About</router-link>
  </div>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
  </div>

  <router-view></router-view>
</template>

<style scoped>
.logo {
   
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
   
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
   
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

三、动态路由

动态路由：是指路由器能够自动地建立自己的路由表,并且能够根据实际情况的变化适时地进行调整。在路由中带有路由参数,路由参数会设置到’$route.params’中

1、动态路由的路径格式

动态路由的路径格式：/组件名/:参数名；在组件中通过’$route.params.参数名’获取参数。

演示：

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
im