vue3 ts路由配置

Vue3中使用TypeScript进行路由配置相对简单。首先，你需要安装Vue Router 4版本：通过运行`npm i vue-router@4`来安装。接下来，你可以按照以下步骤进行配置：

1. 配置别名：你可以在vue.config.js或者vite.config.js中添加别名配置，以便在路由配置中更方便地引用组件。

2. 将路由拆分：习惯上，我们将登录页、404页面、断网页面、锁屏页面等这些页面单独放在一个文件夹中（通常是`page`文件夹），而主要的业务页面放在`views`文件夹。这样做可以更好地组织和管理路由文件。

3. 创建路由：在`/router/index.ts`中，你需要导入必要的依赖并创建路由实例。你可以使用`createWebHashHistory`创建一个使用哈希模式的路由实例。然后，你可以将路由配置拆分成多个文件，比如`viewsRouter`和`pageRouter`，并使用ES6的扩展运算符将它们合并到`routes`数组中。

4. 扩展路由类型：为了在路由对象中自定义配置属性，你可以对`RouteRecordRaw`类型进行扩展，创建一个新的类型`AddRouteRecordRaw`，并添加自定义属性。这样，你就可以在路由对象中定义`hidden`属性等。

以下是一个示例的路由配置文件`/router/index.ts`的代码：

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import viewsRouter from './views'
import pageRouter from './page'

// 对RouteRecordRaw类型进行扩展
export type AddRouteRecordRaw = RouteRecordRaw & { hidden?: boolean }

const router = createRouter({
  history: createWebHashHistory(),
  routes: [...viewsRouter, ...pageRouter as AddRouteRecordRaw[]
})

export default router

这样，你就可以在Vue3中使用TypeScript进行路由配置了。记得在各个路由文件中按照需要导入对应的组件，并将其添加到对应的路由配置中。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vite+vue3+ts中的vue-router基本配置](https://blog.csdn.net/m0_51431448/article/details/126423161)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]