Vue3 如何使用Vue Router路由表

### Vue3 项目中 TypeScript 配置和使用 Vue Router 的方法 在 Vue3 和 TypeScript 结合使用的场景下，Vue Router 提供了强大的功能支持。以下是关于如何配置和使用 Vue Router 的详细说明。 #### 1. 创建 Vue3 + TypeScript 项目 为了确保项目的正常运行，首先需要通过 `@vue/cli` 工具创建一个新的 Vue3 项目，并启用 TypeScript 支持： ```bash npm install -g @vue/cli vue create my-vue3-typescript-project ``` 在交互式提示中选择 **Manually select features** 并勾选 **TypeScript** 和其他所需的功能模块[^4]。 #### 2. 安装 Vue Router 4 Vue Router 4 是专门为 Vue3 设计的版本，在安装之前需确认已卸载旧版 Vue CLI 及其依赖项： ```bash npm uninstall vue-cli -g npm install -g @vue/cli npm install vue-router@next --save ``` 上述命令将安装最新版本的 Vue Router (即 v4)，并将其保存到项目依赖中。 #### 3. 配置 Vue Router 在 Vue3 中推荐使用组合 API (`setup`) 来初始化路由实例。下面是一个完整的示例代码展示如何定义路由以及集成至应用中： ##### 路由文件定义 (`src/router/index.ts`) ```typescript import { createRouter, createWebHistory, RouteRecordRaw } from &#39;vue-router&#39;; // 定义路由表 const routes: Array<RouteRecordRaw> = [ { path: &#39;/&#39;, name: &#39;Home&#39;, component: () => import(&#39;@/views/Home.vue&#39;) // 动态加载视图组件 }, { path: &#39;/about&#39;, name: &#39;About&#39;, component: () => import(&#39;@/views/About.vue&#39;) } ]; // 初始化路由器 export const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes, }); ``` 此部分利用了 TypeScript 类型推断机制自动识别 `RouteRecordRaw` 接口中的字段结构[^2]。 #### 4. 在主入口引入路由 修改 `main.ts` 文件以注册全局路由实例： ```typescript import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; import { router } from &#39;./router&#39;; // 导入自定义路由配置 const app = createApp(App); app.use(router); app.mount(&#39;#app&#39;); ``` 这样就完成了基础框架搭建工作[^1]。 #### 5. 组件内部调用导航逻辑 当希望基于用户操作触发页面切换时，可以借助于 `useRouter()` 方法实现无状态化管理方式： ```javascript <script lang="ts"> import { defineComponent } from &#39;vue&#39;; import { useRouter } from &#39;vue-router&#39;; export default defineComponent({ setup() { const router = useRouter(); const navigateToHomePage = (): void => { router.push(&#39;/&#39;); }; return { navigateToHomePage }; } }); </script> ``` 以上片段展示了如何声明一个函数用于重定向回首页的操作流程。 --- ###