Skip to content

vite 的 vue-router 的元信息布局系统 | Vite's Vue-Router's meta-information layout system

License

Notifications You must be signed in to change notification settings

dishait/vite-plugin-vue-meta-layouts

Repository files navigation

vite-plugin-vue-meta-layouts

vitevue-router 的元信息布局系统


README 🦉

English | Chinese


动机 🤔

vite-plugin-vue-layouts 的重写版本,在最新版本的 vite 中有合理的 hmr !!



使用 🦖

基础

安装

npm i vite-plugin-vue-meta-layouts -D
// vite.config.js
import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import MetaLayouts from "vite-plugin-vue-meta-layouts";

export default defineConfig({
  plugins: [Vue(), MetaLayouts()],
});

使用

import { setupLayouts } from "virtual:meta-layouts";
import { createRouter, createWebHistory } from "vue-router";

const routes = setupLayouts([
  {
    // ... 页面路由配置
  },
]);

const router = createRouter({
  routes,
  history: createWebHistory(),
});
  1. 创建 layouts/default.vue 默认布局,此时页面都会被应用该布局
<template>
  default
  <router-view />
  <!-- 视图出口 -->
</template>
  1. 当然你可以配置不同的的布局

例如创建 layouts/other.vue

// 应用 layouts/default.vue 布局
const home = {
  path: "/",
  component: () => import("./pages/home.vue"),
};

// 应用 layouts/other.vue 布局
const about = {
  path: "/about",
  component: () => import("./pages/home.vue"),
  meta: {
    layout: "other", // 通过元信息来管理布局
  },
};

const routes = setupLayouts([home, about]);

搭配文件路由

当然也支持文件路由哦 🤗

安装
npm i vite-plugin-pages -D
// vite.config.js
import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import Pages from "vite-plugin-pages"; // 引入文件路由插件
import MetaLayouts from "vite-plugin-vue-meta-layouts";

export default defineConfig({
  plugins: [
    Vue(),
    Pages(), // 配置文件路由插件
    MetaLayouts(),
  ],
});
使用
import fileRoutes from "~pages"; // 引入文件路由表
import { setupLayouts } from "virtual:meta-layouts";
import { createRouter, createWebHistory } from "vue-router";

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

此时可以通过页面中的自定义块 routemeta 来做布局配置

<!-- 你的页面 -->
<template> 内容 </template>

<route> { meta: { layout: 'other' } } </route>


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

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


配置

// vite.config.js
import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import MetaLayouts from "vite-plugin-vue-meta-layouts";

export default defineConfig({
  plugins: [
    Vue(),
    MetaLayouts({
      target: "src/layouts", // 布局目录,默认 src/layouts
      defaultLayout: "default", // 默认布局,默认为 default
      importMode: "sync", // 加载模式,支持 sync 和 async。默认为自动处理,SSG 时为 sync,非 SSG 时为 async
      skipTopLevelRouteLayout: true, // 打开修复 https://github.com/JohnCampionJr/vite-plugin-vue-layouts/issues/134,默认为 false 关闭
      excludes: [], // 排除路径,仅接受 glob
    }),
  ],
});


类型声明 🦕

如果你是 ts 项目,还可以在 tsconfig.json 中配置以下声明

{
  "compilerOptions": {
    "types": ["vite-plugin-vue-meta-layouts/client"]
  }
}


route 代码提示 💡

使用 volar-plugin-vue-router 可以带来友好的代码提示.



注意

由于布局系统需要在最外层嵌套一层布局路由,所以可能会造成路由表的获取混乱,此时可以用辅助的函数 👇

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

const getRoutes = createGetRoutes(router);

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


实现 👀

布局实现思路来自 vite-plugin-vue-layouts

但用了更简单方案 👉 虚拟文件Glob 导入

该方案可以自动地做合理的 hmr



组织 🦔

欢迎关注 帝莎编程



License

Made with markthree

Published under MIT License.