前端路由Vite插件

前端路由Vite插件

​vite-plugin-pages​

可以按照约定俗成的规则生成路由信息。

src/views/index.vue -> /
src/views/index/a.vue -> /a // 这里的a.vue就是index.vue的子路由（children）
src/views/father/index.vue -> /father
src/views/father.vue -> /father
src/views/father/son.vue -> /father/son
src/views/father/[id].vue -> /father/:id
src/views/[father]/son.vue -> /:father/son
src/views/[…all].vue ->文件用来适配404页面

 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import pages from 'vite-plugin-pages'

 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     pages({
       dirs: "src/views", // 需要生成路由的文件目录，默认就是识别src下面的pages文件
       exclude: ["**/components/*.vue"], // 排除在外的目录，上面配置目录的例子，里面有 components 目录，我们不希望他被解析为路由
       extendRoute(route, parent) {
         if (route.path === '/') {
           //给默认路由加一个redirect，默认为index.vue
           return {
             ...route,
             redirect: '/about'
           }
         }
       }
     }),
   ]
 })