vite项目自动配置路由-五八三

背景

项目过程中，你是否每加一个页面，都要添加路由的的烦恼？
你是否想每加一个.vue文件，自动生成路由文件呢？

下面这个插件，就可以解决你的这些烦恼。

安装

#Npm
npm i -D unplugin-vue-router




# Pnpm
pnpm i -D unplugin-vue-router

使用

vite.config.js

// vite.config.ts
import VueRouter from 'unplugin-vue-router/vite'




export default defineConfig({
  plugins: [
    VueRouter({
      routesFolder: 'src/views',
      exclude: ['**/components/*.vue'],
      extensions: ['.vue'],
    }),
    // ⚠️ 必须要放到Vue()之前
    Vue(),
  ],
})

src/router/index.js

把vue-router替换为vue-router/auto

// src/router/index.js

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





const router = createRouter({

  history: createWebHashHistory(import.meta.env.BASE_URL),
});


export default router;

配置

VueRouter({
  // 自动生成路由的文件夹
  routesFolder: 'src/pages',


  // 生成路由的扩展名
  extensions: ['.vue'],


  // 要从路线生成中排除的文件列表
  // 例如['**/__*']将排除以'__'开头的所有文件和文件夹
  //例如['**/__*/**/*']将排除以'__'开头的文件夹中的所有文件
  //例如['**/*。component.vue']将排除以`.component.vue`的结尾的组件
  exclude: [],

  // 生成类型的路径
  // 可以通过设置 false 来禁用.
  dts: './typed-router.d.ts',


  // 自定义 <route> 模块
  routeBlockLang: 'json5',

  // 更改页面组件的导入方式，可以是“异步”、“同步”或函数:
  // (filepath: string) => 'async' | 'sync'
  importMode: 'async',
})

文件夹结构

src/views/



├── index.vue
├── about.vue
└── users.vue

这将生成以下路由：

/：->渲染index.vue组件
/about：->渲染about.vue组件
/users：->渲染users.vue组件

索引路线

任何index.vue文件将生成一个空路径（类似于index.html文件）：

src/views/index.vue：生成/路由
src/views/collect/index.vue：生成/collect路由

嵌套路由

src/views/



├── users/


│   └── index.vue

│   └── edit.vue

│   └── [id].vue

/users/index：->渲染users/index.vue组件
/users/edit：->渲染users/edit.vue组件
/users/:id：->渲染users/[id].vue组件,id成为路由参数。

如果你不想嵌套，并且生成users开头路由，可以在users统计添加users.create.vue组件

src/views/



├── users/


│   └── index.vue

│   └── edit.vue

│   └── [id].vue

├── users.create.vue

动态路由

src/views/



├── users/


│   └── [id].vue
│   └── [[id]].vue
│   └── details_[id].vue[
│   └── [classes]+.vue

/users/:id：->渲染users/[id].vue组件,id成为路由params: { id: 11 }参数。
/users?id：->渲染users/[[id]].vue组件,?id=11成为路由query: { id: 11 }参数, 例如：`/users?id=11
/users/details_:id：->渲染users/details_[id].vue组件,例如：`users/details_11
/users/[classes]+：->渲染users/[classes]+.vue组件, 来创建可重复的参数，可匹配：/users/v1/a, /users/v2/b/c

命名视图

可以通过在文件名后附加一个@ + a名称来定义vueRouter组合布局

src/views/
├── about/
│   └── details.vue
│   └── details@aLeft.vue

路由扩展

definePage()

definePage()允许您定义与路由相关的任何额外属性。当您需要自定义path、name、meta

<script setup>
definePage({
  name: 'my-collect',
  path: '/collect_:param',
  alias: ['/collect/:param'],
  meta: {
    title: '前台',
  },
  props: true,
});
</script>

<route>

<route>自定义块是扩展现有路由

<template>
   <div>Collect</div>
 </template>


 <route lang="json">
   {
     "name": "my-collect",
     "path": "/collect/:param",
     "meta": {
       "title": "前台"
     },
     "props": true
   }
 </route>

 <script setup></script>


 <style lang="scss" scoped></style>

extendRoutes()

您可以通过将extendRoutes函数传递给createRouter()来扩展现有路由

// src/router/index.js

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





const router = createRouter({

  extendRoutes: (routes) => {
    console.log('routes: ', routes);
    const collectRoute = routes.find((r) => r.name === '/collect');
    if (collectRoute) {
      collectRoute.meta ??= {};
      collectRoute.meta.title = '前台';
    }
    return routes;
  },
  history: createWebHashHistory(import.meta.env.BASE_URL),
});

export default router;