Vue3自动生成路由（unplugin-vue-router）

Abao

已于 2024-08-16 19:11:36 修改

阅读量851

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2024-08-16 19:11:13 首次发布

本文链接：https://blog.csdn.net/weixin_72439307/article/details/141267404

unplugin-vue-router 是一个构建时的插件，它能够基于你的 Vue 组件文件自动生成路由配置。

这意味着你不再需要手动编写冗长的路由配置代码，只需按照约定创建组件文件，路由就会自动配置好。

安装与配置

npm install -D unplugin-vue-router

配置vite vite.config.ts

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

export default defineConfig({
  plugins: [
    VueRouter({ /* options */ }),
    vue(),
    // ...其他插件
  ],
  // ...其他配置
});

配置路由

在 src/router/index.ts 中，使用 unplugin-vue-router 提供的 routes 来创建路由器：

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

const router = createRouter({
  history: createWebHistory(),
  routes: routes, // 使用自动生成的路由
});

export default router;

自动路由的规则

unplugin-vue-router 会根据你 src/pages 目录下的组件文件自动创建路由。例如：

src/pages/index.vue 会自动对应到根路由 /。
src/pages/detail.vue 会自动创建路由 /detail。
对于动态路由，如 src/pages/detail/[id].vue，会自动生成 /detail/:id 路由。
此外，[...404].vue 文件会被用作 404 错误页面的路由。
更多配置，请参考 unplugin-vue-router 官方文档：
https://uvr.esm.is/guide/file-based-routing.html

自定义路由

虽然 unplugin-vue-router 提供了强大的自动路由功能，但在某些情况下你可能需要添加自定义路由。你可以通过扩展自动生成的 routes 数组来实现：

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import { routes } from 'vue-router/auto-routes';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    ...routes,
    {
      path: '/custom', // 自定义路由
      component: () => import('@/views/custom.vue'),
    },
  ],
});

export default router;

实现原理

unplugin-vue-router 是一个基于 unplugin 库开发的插件，它能够与 Vite、Webpack、Rollup 等多种构建工具无缝集成。该插件通过分析项目中的 Vue 文件，自动生成路由配置，无需开发者手动编写路由文件。

unplugin-vue-router 的工作原理是在构建时扫描指定的目录（默认为 src/pages），根据文件名和目录结构生成路由配置。它利用了 Vue Router 的新特性，并结合了 TypeScript 来提供类型安全和自动完成。

插件配置和初始化

在项目的配置文件中，例如 Vite 的 vite.config.js，我们通过配置 unplugin-vue-router 插件，指定路由文件的生成目录和类型声明文件的位置：

// vite.config.js
import { defineConfig } from 'vite';
import VueRouter from 'unplugin-vue-router/vite';

export default defineConfig({
  plugins: [
    VueRouter({
      routesFolder: 'src/pages', // 指定路由文件所在的目录
      dts: 'types/typed-router.d.ts', // 指定类型声明文件的输出路径
    }),
    // ...其他插件
  ],
  // ...其他配置
});