generated fromdishait/vite-plugin-template
- Notifications
You must be signed in to change notification settings - Fork8
vite 的 vue-router 的元信息布局系统 | Vite's Vue-Router's meta-information layout system
License
NotificationsYou must be signed in to change notification settings
dishait/vite-plugin-vue-meta-layouts
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
vite 的vue-router 的元信息布局系统
English | Chinese
vite-plugin-vue-layouts的重写版本，在最新版本的vite 中有合理的hmr ！！
npm i vite-plugin-vue-meta-layouts -D
// vite.config.jsimport{defineConfig}from"vite";importVuefrom"@vitejs/plugin-vue";importMetaLayoutsfrom"vite-plugin-vue-meta-layouts";exportdefaultdefineConfig({plugins:[Vue(),MetaLayouts()],});
import{setupLayouts}from"virtual:meta-layouts";import{createRouter,createWebHistory}from"vue-router";constroutes=setupLayouts([{// ... 页面路由配置},]);constrouter=createRouter({ routes,history:createWebHistory(),});
- 创建
layouts/default.vue默认布局，此时页面都会被应用该布局
<template> default<router-view/><!-- 视图出口 --></template>
- 当然你可以配置不同的的布局
例如创建layouts/other.vue
// 应用 layouts/default.vue 布局consthome={path:"/",component:()=>import("./pages/home.vue"),};// 应用 layouts/other.vue 布局constabout={path:"/about",component:()=>import("./pages/home.vue"),meta:{layout:"other",// 通过元信息来管理布局},};constroutes=setupLayouts([home,about]);
当然也支持文件路由哦 🤗
npm i vite-plugin-pages -D
// vite.config.jsimport{defineConfig}from"vite";importVuefrom"@vitejs/plugin-vue";importPagesfrom"vite-plugin-pages";// 引入文件路由插件importMetaLayoutsfrom"vite-plugin-vue-meta-layouts";exportdefaultdefineConfig({plugins:[Vue(),Pages(),// 配置文件路由插件MetaLayouts(),],});
importfileRoutesfrom"~pages";// 引入文件路由表import{setupLayouts}from"virtual:meta-layouts";import{createRouter,createWebHistory}from"vue-router";constrouter=createRouter({routes:setupLayouts(fileRoutes),// 注册文件路由表history:createWebHistory(),});
此时可以通过页面中的自定义块route 的meta 来做布局配置
<!-- 你的页面 --><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";constrouter=createRouter({routes:setupLayouts(routes),// 注册文件路由表history:createWebHistory(),});
// vite.config.jsimport{defineConfig}from"vite";importVuefrom"@vitejs/plugin-vue";importMetaLayoutsfrom"vite-plugin-vue-meta-layouts";exportdefaultdefineConfig({plugins:[Vue(),MetaLayouts({target:"src/layouts",// 布局目录，默认 src/layoutsdefaultLayout:"default",// 默认布局，默认为 defaultimportMode:"sync",// 加载模式，支持 sync 和 async。默认为自动处理，SSG 时为 sync，非 SSG 时为 asyncskipTopLevelRouteLayout: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"] }}使用volar-plugin-vue-router可以带来友好的代码提示.
由于布局系统需要在最外层嵌套一层布局路由，所以可能会造成路由表的获取混乱，此时可以用辅助的函数👇
import{createGetRoutes}from"virtual:meta-layouts";constgetRoutes=createGetRoutes(router);// 获取路由表但是不包含布局路由console.log(getRoutes());
布局实现思路来自vite-plugin-vue-layouts。
该方案可以自动地做合理的hmr。
欢迎关注帝莎编程
Made withmarkthree
Published underMIT License.
About
vite 的 vue-router 的元信息布局系统 | Vite's Vue-Router's meta-information layout system
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.