如何使用 Vue Router 的类型化路由

在 vue-router 4.4.0+ 版本中，你可以使用插件来增强 Vue Router 在 TS 项目中的使用体验。

如果你使用 Vite 作为构建工具，那么可以使用 unplugin-vue-router 插件来自动化生成路由和类型。当然你也可以手动进行配置，但是这很容易出错。

安装

我们可以先安装 unplugin-vue-router 插件：

bash

pnpm i -D unplugin-vue-router

配置

在 vite.config.ts 中配置插件：

import vue from '@vitejs/plugin-vue'
import VueRouter from 'unplugin-vue-router/vite'
import { defineConfig } from 'vite'

// https://vite.dev/config/
export default defineConfig({
    plugins: [
        VueRouter(), // 这个插件需要放到 Vue 插件之前
        vue()
    ],
})

配置 tsconfig.json 文件

json

{
  "files": [],
  "include": ["./typed-router.d.ts"],
  "compilerOptions": {
    "moduleResolution": "Bundler",
    "types": ["unplugin-vue-router/client"]
  },
  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
}

配置 vite-env.d.ts

// env.d.ts
/// <reference types="vite/client" />
/// <reference types="unplugin-vue-router/client" />

使用

从 vue-router/auto-routes 导入生成的 routes，将它传递给 CreateRouter

import { createRouter, createWebHistory } from 'vue-router'
import { routes } from 'vue-router/auto-routes'

const router = createRouter({
    routes,
    history: createWebHistory()
})

然后，我们就可以在 src/pages 目录下创建文件了，所有的 vue 文件都会被视为一个页面，会自动生成路由。生成的 TS 类型文件会保存在 typed-router.d.ts 中。

这样我们在使用 router-link 或者 router.push 时，就可以获得类型提示了。

类型化路由效果

其余配置

插件其余配置

我们可以在vite.config.ts中配置其余参数

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueRouter from 'unplugin-vue-router/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    VueRouter({
      dts: '/types/typed-router.d.ts', // 指定生成的类型文件路径
      exclude: ["**/components/**", "**/layouts/**",'**/data/**', '**/types/**'], // 排除不需要生成路由的文件
      extensions: ['vue'], // 支持的文件扩展名
    }), // 这个插件需要放到 Vue 插件之前
    vue()
  ],
})

热重载

配置热重载，在创建文件时更新路由类型文件

import { createRouter, createWebHistory } from 'vue-router'
import { handleHotUpdate, routes } from 'vue-router/auto-routes'

const router = createRouter({
    routes,
    history: createWebHistory()
})

if (import.meta.env) {
    handleHotUpdate(router)
}

如何使用 Vue Router 的类型化路由

安装

配置

使用

其余配置

插件其余配置

热重载

评论区