feat: 添加默认布局和第二布局,更新路由配置以支持新布局
This commit is contained in:
25
src/layouts/default-layout.vue
Normal file
25
src/layouts/default-layout.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div class="layout-tip">[default layout]</div>
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style>
|
||||
.layout-tip {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 9999;
|
||||
background-color: #fafafa;
|
||||
border: 1px solid #ccc;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
text-transform: uppercase;
|
||||
opacity: 0.8;
|
||||
background: rgba(255, 255, 255, 0.5); /* 半透明白色背景 */
|
||||
backdrop-filter: blur(5px); /* 背景模糊 */
|
||||
}
|
||||
</style>
|
@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { RouterView } from 'vue-router';
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
8
src/layouts/second.vue
Normal file
8
src/layouts/second.vue
Normal file
@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<div class="layout-tip">[second layout]</div>
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped></style>
|
@ -74,3 +74,8 @@ watch(
|
||||
</template>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
layout: second
|
||||
</route>
|
||||
|
@ -1,7 +1,16 @@
|
||||
<script lang="tsx" setup>
|
||||
import { router } from '@/plugins/router';
|
||||
import { createGetRoutes, setupLayouts } from 'virtual:generated-layouts';
|
||||
import { routes } from 'vue-router/auto-routes';
|
||||
import I18nComp from '../components/i18nComp/index.vue';
|
||||
|
||||
const getRoutes = createGetRoutes(router);
|
||||
const setupLayoutsResult = setupLayouts(routes);
|
||||
|
||||
console.debug(`routes :>> `, routes);
|
||||
console.debug(`getRoutes() :>> `, getRoutes()); // 获取路由表但是不包含布局路由
|
||||
console.debug(`setupLayoutsResult :>> `, setupLayoutsResult);
|
||||
|
||||
useHead({
|
||||
// Titles
|
||||
title: 'Hello World',
|
||||
|
@ -48,8 +48,10 @@ export function Plugins() {
|
||||
},
|
||||
}), // https://vue-macros.dev/zh-CN/guide/bundler-integration.html
|
||||
|
||||
// https://github.com/JohnCampionJr/vite-plugin-vue-layouts
|
||||
Layouts(),
|
||||
// https://github.com/JohnCampionJr/vite-plugin-vue-layouts?tab=readme-ov-file#configuration
|
||||
Layouts({
|
||||
defaultLayout: 'default-layout',
|
||||
}),
|
||||
|
||||
// https://github.com/antfu/unocss
|
||||
// see uno.config.ts for config
|
||||
|
Reference in New Issue
Block a user