侧边栏壁纸
  • 累计撰写 198 篇文章
  • 累计创建 105 个标签
  • 累计收到 36 条评论
vue

vue3中vite 的 vue-router 的元信息布局系统——vite-plugin-vue-meta-layouts

神兵小将
2022-04-16 / 0 评论 / 0 点赞 / 60 阅读 / 1,200 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-16,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

为什么使用

因为我们在开发的时候,经常会使用类似iframe这样的结构,但是每个都去写又会复杂,使用这个插件,不光提升效率,还能有更多灵活性。

安装

npm i vite-plugin-vue-meta-layouts -D

image-1650083508299

配置

import MetaLayouts from 'vite-plugin-vue-meta-layouts'

	plugins: [
        Vue(), 
        MetaLayouts()
    ]

使用

配置路由

这里需要改造一下router.ts

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

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

const router = createRouter({
    routes,
    history: createWebHistory()
})

搭配vite-plugin-pages使用。

import fileRoutes from '~pages' // 引入文件路由表
import { setupLayouts } from 'virtual:meta-layouts'
import { createRouter, createWebHistory } from 'vue-router'

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

image-1650085350397

找不到类型声明处理

env.d.ts文件添加类型声明:

/// <reference types="vite-plugin-vue-meta-layouts/client" />

创建layouts

当然这里布局文件需要引入router-view,毕竟他的功能就类似iframe一样。

默认layouts布局

创建layouts/default.vue默认布局,此时页面都会被应用该布局

<template>
    default
    <router-view /> 
</template>

其他布局例如admin.vue

<template>
    admin
    <router-view /> 
</template>

vue页面使用

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

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

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

完工。

0

评论区