unplugin-vue-router怎么用

unplugin-vue-router 是一个 Vue.js 插件，提供了一些有用的功能，例如路由自动导入、路由配置优化等。以下是使用 unplugin-vue-router 的步骤：

1. 安装插件

使用 npm 或 yarn 安装插件：

npm install unplugin-vue-router --save-dev

或

yarn add unplugin-vue-router --dev

2. 配置插件

在 Vue CLI 3.x 和 4.x 中，可以在 vue.config.js 文件中配置插件：

const { defineConfig } = require('unplugin-vue-router')

module.exports = defineConfig({
  // 插件配置
})

在 Vite 中，可以在 vite.config.js 文件中配置插件：

import { defineConfig } from 'unplugin-vue-router'

export default defineConfig({
  // 插件配置
})

3. 使用插件功能

unplugin-vue-router 提供了多个功能，以下是一些常用的功能：

- 路由自动导入：

// 在 vue.config.js 或 vite.config.js 中配置
const { defineConfig } = require('unplugin-vue-router')

module.exports = defineConfig({
  // 路径为 src/router/**/*.js
  include: [/\.js$/],
})

然后在路由配置文件中，可以使用 `import.meta.glob` 导入所有路由配置文件：

const routes = []

// 导入所有路由配置文件
const routeFiles = import.meta.glob('./**/*.js')

// 遍历路由配置文件
for (const path in routeFiles) {
  const route = routeFiles[path].default
  if (Array.isArray(route)) {
    routes.push(...route)
  } else {
    routes.push(route)
  }
}

export default routes

- 路由配置优化：

可以通过 `transform` 配置项对路由配置进行优化，例如移除空的路由配置、将路由配置中的 component 属性转换为懒加载等。

const { defineConfig } = require('unplugin-vue-router')

module.exports = defineConfig({
  transform: 'unplugin-vue-router/dist/transformRoute',
})

以上就是使用 unplugin-vue-router 的基本步骤和常用功能。