今天学习下vue3的路由功能，这个主要是应用于构建单页面应用（SPA），通过动态地切换不同的组件来模拟多页面的效果，而无需重新加载整个页面。主要用的是Vue Router来实现。

一个很简单的示例，比如需要做一个单页面应用，官网，官网上面就需要几个导航，首页，关于我们。

这个就可以用vue3的路由来实现。

使用方法

1. 安装 Vue Router：
   使用 npm 或 yarn 安装 Vue Router。对于 Vue 3，应安装 Vue Router 4，因为它是专门为 Vue 3 设计和优化的。

npm install vue-router@4

2，创建路由实例：
在 Vue 项目中，需要创建一个路由实例，并定义路由规则。这通常在项目的入口文件（如 main.js 或 main.ts）中进行。

import { createApp } from 'vue'  
import App from './App.vue'  
import { createRouter, createWebHistory } from 'vue-router'  
import Home from './views/Home.vue'  
import About from './views/About.vue'  

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

createApp(App).use(router).mount('#app')

3，在组件中使用路由：
在 Vue 组件中，可以通过 <router-link> 组件实现页面的导航，通过 <router-view> 组件来展示当前路由所对应的组件。

<template>  
  <div>  
    <router-link to="/">Home</router-link>  
    <router-link to="/about">About</router-link>  
    <router-view></router-view>  
  </div>  
</template>

在单页面应用中使用Vue Router能轻松地构建出结构清晰、易于维护的应用。