Vue Router 是 Vue.js 官方的路由管理器。Vue Router 基于路由和组件的映射关系，页面路径发生改变，就进行对应的组件切换。

安装：

npm install vue-router。

基本 使用：

// src/router/index.js
import {createRouter, createWebHashHistory} from 'vue-router'

import Home from '../components/Home.vue'
import About from '../components/About.vue'

// 1. 创建路由对象
const router = createRouter({
    // 配置路由映射关系，一个路径对应一个组件
    routes: [
        {path: '/', redirect: '/home'}, // 如果路径是 /，重定向到 /home 
        {path: '/home', component: Home},
        {path: '/about', component: About}
    ],
    // 配置采用的模式。createWebHashHistory 是 hash 模式，createWebHistory 是 history 模式
    history: createWebHashHistory(),
})

export default router

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
// 2. 注册路由对象
app.use(router)
app.mount('#app')

// src/App.vue
<template>
  <!-- 3. 点击修改路径 -->
  <router-link to="/home">首页</router-link>
  <router-link to="/about">关于</router-link>

  <!-- 4. 路径匹配到的组件将会显示在这个占位组件处 -->
  <router-view></router-view>
</template>

<script setup>
</script>

<style scoped>
</style>   

<router-link> 组件：

<router-link>：用于创建导航链接。属性有：

1. to：用于指定要跳转的路径。属性值是一个字符串或者对象。

   <router-link to="/home">首页</router-link>
     <router-link to="{path: '/home'}">首页</router-link>
   

2. replace：设置 replace 属性的化，路径跳转时将会直接替换掉旧路径，旧路径不会进入历史列表，回退页面的话无法回退到旧页面。
3. active-class：设置激活 a 元素后应用的 class 属性名称。默认是 router-link-active。
4. exact-active-class：链接精准激活时，应用于 a 元素的 class 属性名称。默认是 router-link-exact-active。

动态路由：

路由懒加载：

// src/router/index.js
import {createRouter, createWebHashHistory} from 'vue-router'

// 通过使用 import() 函数进行路由懒加载。打包时会进行分包处理，就可以在需要的时候再根据路径下载对应的组件代码
const Home = () => import('../components/Home.vue')
const About = () => import('../components/About.vue')

const router = createRouter({
    routes: [
        {path: '/', redirect: '/home'}, 
        {path: '/home', component: Home},
        {path: '/about', component: About}
    ],
    history: createWebHashHistory(),
})

export default router