vue3 引入router

### 如何在 Vue 3 中设置和使用 vue-router

#### 安装 `vue-router`

对于基于 Vue 3 的项目，安装 `vue-router` 是第一步。通过 npm 或者 yarn 来完成这个过程：

npm install vue-router@next

或者

yarn add vue-router@next

这确保了所使用的版本兼容于 Vue 3[^1]。

#### 创建路由实例

创建一个新的文件用于定义路由配置，通常命名为 `router.js` 或 `router/index.js`。下面是一个简单的例子展示如何为应用创建基本的路由配置：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'    // 假设有一个名为Home的视图组件
import About from './views/About.vue'  // 和另一个名为About的视图组件

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes          // 短语法表示routes: routes
})

export default router;

这段代码展示了怎样导入必要的函数并创建一个路由器实例，同时指定了两个页面路径及其对应的组件。

#### 配置主程序入口

最后一步是在项目的主文件（通常是 `main.ts` 对于 TypeScript 项目或者是 `main.js` 对于 JavaScript 项目）里引入刚刚创建好的路由对象，并将其传递给应用程序实例：

// main.ts or main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

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

这样就完成了整个集成工作，在浏览器访问时就可以看到不同URL对应的不同页面显示效果了。