unplugin-vue-router文件路由实操

unplugin-vue-router 会根据你的文件结构自动生成路由配置。虽然路由是自动生成的，但你仍然可以通过 路由元信息（meta） 来对组件做一些特殊处理。

yaml 复制代码

<route lang="yaml">
    name: login
    meta:
      whiteList: true
      title: 登录跳转
      constant: true
      layout: index
</route>

javascript 复制代码

安装
pnpm i unplugin-vue-router -D

配置// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VueRouter from "unplugin-vue-router/vite";

export default defineConfig({
  plugins: [
    VueRouter({ routesFolder: "src/views" }),
    vue(),
  ]
});

使用
import { routes } from "vue-router/auto/routes" // 引入文件路由表
import { createRouter, createWebHistory } from "vue-router"

const router = createRouter({
  routes: routes, // 注册文件路由表
  history: createWebHistory(),
})

运行项目打印routes就会看到生成好的路由

一般搭配vite-plugin-vue-meta-layouts使用

javascript 复制代码

安装
pnpm i vite-plugin-vue-meta-layouts -D

配置// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VueRouter from "unplugin-vue-router/vite";
import MetaLayouts from "vite-plugin-vue-meta-layouts"

export default defineConfig({
  plugins: [
    VueRouter({ routesFolder: "src/views" }),
    Layouts({
      target: "src/layouts", // 布局目录，默认 src/layouts
      defaultLayout: "index", // 默认布局，默认为 default
      skipTopLevelRouteLayout: true, 
    }),
    vue(),
  ]
});

使用
import { routes } from "vue-router/auto/routes" // 引入文件路由表
import { setupLayouts } from "virtual:meta-layouts"
import { createRouter, createWebHistory } from "vue-router"

const router = createRouter({
  routes: setupLayouts(routes), // 注册文件路由表
  history: createWebHistory(),
})

如果你是 `ts` 项目，还可以在 `tsconfig.json` 中配置以下声明
{
  "compilerOptions": {
    "types": ["vite-plugin-vue-meta-layouts/client"]
  }
}

在layouts文件夹创建不同的的布局文件

在页面组件中通过路由元信息配置layout的值来让页面使用哪种布局，一般在vite.config.ts配置默认使用的布局

ini 复制代码

<route lang="yaml">
    meta:
      layout: empty 
</route>

然后可以通过createGetRoutes查看生成的路由

javascript 复制代码

import { createGetRoutes } from "virtual:meta-layouts"

const getRoutes = createGetRoutes(router)

// 获取路由表但是不包含布局路由
console.log(getRoutes())

文件路由使用路由query 传参跳转页面需要为 router-view 添加唯一 key 不然就会出现多次跳转同一页面，如果只是参数不同，页面不会重新执行生命周期方法

ini 复制代码

<router-view v-slot="{ Component, route }">
   <keep-alive :include="cachedComponents">
      <component :is="Component" :key="route.fullPath" />
   </keep-alive>
</router-view>

当然，如果是使用动态路由就不会有这个问题

src/views/users/[id].vue → /users/:id
src/views/posts/[...slug].vue → /posts/:slug(.*)*