如何使用 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 中配置插件:

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{3,5,6} 复制代码
{
  "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

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

使用

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

ts 复制代码
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中配置其余参数

ts{9-11} 复制代码
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()
  ],
})

热重载

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

ts 复制代码
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)
}
相关推荐
南玖i2 分钟前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js
excel5 分钟前
Web发展与Vue.js导读
前端
YAY_tyy7 分钟前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js
Zuckjet_3 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801463 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店5 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown5 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip6 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿6 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.7 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js