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

vite布局插件之 vite-plugin-vue-layouts使用

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

概述

这与vite-plugin-pages一起使用效果最好。

布局默认存储在/src/layouts文件夹中,是标准的 Vue 组件,模板中带有 a。

没有指定布局的页面default.vue用于其布局。

您可以使用路由块来允许每个页面确定其布局。页面下方的块将查找/src/layouts/users.vue其布局。

安装

pnpm add -D vite-plugin-vue-layouts

配置

vite配置

import Layouts from 'vite-plugin-vue-layouts';

plugins: [
    Layouts({
      layoutsDirs: 'src/mylayouts', //layout目录
      defaultLayout: 'myDefault' //默认layout
    }),
  ],

路由配置

创建router.ts文件,写入以下内容:

import { setupLayouts } from 'virtual:generated-layouts'
import generatedRoutes from 'virtual:generated-pages'
import { createRouter,createWebHistory } from 'vue-router'

export const router =  createRouter({
  history:createWebHistory(),
  routes:setupLayouts(generatedRoutes),
});

main.ts中引用

import { router } from './router';

const app = createApp(App)

app.use(router).mount('#app')

类型定义

env.d.ts中添加以下内容:

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

使用

App.vue

<template>
  <router-view v-slot="{ Component, route }">
    <transition name="slide">
      <component :is="Component" :key="route" />
    </transition>
  </router-view>
</template>

创建layout

创建一个admin.vue.

<template>
	<div>
   		 admin.layout
  		<router-view />
  </div>
</template>

创建页面

创建一个页面home.vue

<template><div>home</div></template>
<route lang="yaml">
meta:
  layout: default
</route>

访问:/hoem,可以看到

admin.layout
home

至此,完成。

高级

在页面设置静态数据

如果您想在页面中设置状态并在布局中对其进行处理,请将其他属性添加到路由的meta属性中。这样做只有在您知道构建时的状态时才有效。

如果您使用vite-plugin-pages ,则可以使用该<route>块。

home.vue

< template > < div >home</ div > </ template > 
< route  lang =" yaml " > 
meta: 
  layout: default 
  title: 我是测试的meta.title信息
</ route >

admin.vue:

< script  setup > 
import  {  useRouter  }  from  'vue-router' 
</ script > 
< template > 
  < div>
  {{useRouter().currentRoute.value.meta.title}}
    < router -view />
   </ div > 
</template>

image-1650109113747

其他更多请参考官方:https://github.com/JohnCampionJr/vite-plugin-vue-layouts

0

评论区