vue 配置router

### 配置 Vue Router

在 Vue 应用程序中集成路由功能，首先需要安装 `vue-router` 包。对于基于 Vue CLI 创建的应用项目而言，可以通过命令行工具轻松完成这一操作。

一旦安装完毕，在应用程序入口文件（通常是 main.js 或 app.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,
  }
]

// 创建路由器实例，并传递routes配置
const router = createRouter({
  history: createWebHistory(),
  routes          // 短语法相当于：routes: routes
})

export default router;

接着，在主应用文件里注册这个新创建好的路由器对象[^1]。

为了使路由生效，还需要修改根级别的 App 组件来包含 `<router-view>` 标签，它会作为占位符用于渲染匹配到的不同页面内容:

<template>
  <div id="app">
    <!-- 导航栏 -->
    <nav>
      <router-link to="/">首页</router-link> |
      <router-link to="/about">关于我们</router-link>
    </nav>

    <!-- 页面展示区 -->
    <router-view></router-view>
  </div>
</template>

上述过程描述了如何初始化以及基本使用 vue-router 来管理单页应用中的不同视图切换逻辑。