Vue项目根据基于.vue文件路径配置动态路由

        为了简化路由配置的过程，借助 Vite 的两个插件：Vite-plugin-pages 和 Vite-plugin-vue-layouts。Vite-plugin-pages 可以自动化生成路由配置，而 Vite-plugin-vue-layouts 则可以帮助我们创建和管理布局组件。

        注意的是（如果项目中要包含children子路由）生成动态路由不能生成children就不能使用这种方法

1、安装插件

        package.json 文件配置以下操作：安装除了router必备以外的三个插件

  "dependencies": {
    "@gausszhou/vue3-drag-resize-rotate": "^3.0.1",
    "vue-router": "^4.1.6",
  },
  "devDependencies": {
    "unplugin-auto-import": "0.15.3",
    "vite-plugin-pages": "0.29.0",
  }

2、在项目的 Vite 配置文件 vite.config.js，我们需要进行插件的配置。配置如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 路由配置
import Pages from 'vite-plugin-pages'
import Layouts from 'vite-plugin-vue-layouts'

export default defineConfig({
  plugins: [
    vue(),
    Pages({
      dirs: ['./src/view'], // 需要生成路由的文件目录
      exclude: ['**/*.js', '**/components/*.vue']   // （1）排除js文件 （2）排除在外的目录，即不将所有 components 目录下的 .vue 文件生成路由
    }),
    Layouts({
      layoutsDirs: 'src/layout',  // 布局文件存放目录
      defaultLayout: 'index'  // 默认布局，对应 src/layout/index.vue
    }),
  ],
})

3、router的index.js 文件配置以下操作

import { createRouter, createWebHistory } from 'vue-router'
import routes from '~pages'
import { setupLayouts } from 'virtual:generated-layouts'
console.log('打印的路由：', setupLayouts(routes));
const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            redirect: to => {
                // 在这里可以对一些用户管理进行判断
                if (to.path == '/') {
                    return { path: '/home' }
                }
            },
        },
        ...setupLayouts(routes)
    ],
})
export default router

4、main.js 文件配置以下操作

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router';

const app = createApp(App)

app.use(router);

app.mount('#app')

5、app.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script setup>

</script>

6、效果如图所示：

view 创建了多少个 .vue文件  就会生成一一对应的路由，这样就基于.vue文件路径实现了动态路由