vue3router如何应用

### 配置 Vue Router

在 Vue 3 项目中集成 Vue Router 可以通过几个主要步骤完成。首先，确保安装了兼容 Vue 3 的 Vue Router 版本 (4.x)[^2]。

对于新项目而言，在初始化阶段可以通过命令行工具来添加 Vue Router：

npm install vue-router@next --save

或是使用 Yarn:

yarn add vue-router@next

接着是在项目的入口文件 `main.js` 或者 `main.ts` 中引入并应用路由实例[^1]:

import { createApp } from 'vue'
import App from './App.vue'
// 导入创建路由器的方法
import { createRouter, createWebHistory } from 'vue-router'

const app = createApp(App)

// 创建路由对象
const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            name: 'Home',
            component: () => import('@/views/HomeView.vue')
        },
        // 更多路径配置...
    ]
})

app.use(router).mount('#app')  // 将路由挂载到Vue实例上

上述代码展示了如何定义简单的路由表以及怎样将其与应用程序关联起来。值得注意的是，这里采用了懒加载的方式导入组件(`() => import('...')`)，这有助于提高性能和减少初始加载时间[^3]。

为了使页面能够响应 URL 改变而显示不同的视图内容，还需要在模板里放置 `<router-view>` 组件作为占位符，该位置会被匹配成功的组件所占据。

<template>
  <div id="app">
    <!-- 这里的内容会根据当前URL动态变化 -->
    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
/* ... */
</script>

这样就完成了在一个典型的单页应用(SPA)中的基本路由设置过程。