From 799effa8be2462cde6986cf7e13d9d99b29e8ae6 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期一, 03 六月 2024 11:19:47 +0800
Subject: [PATCH] chore:封装layout
---
src/layout/components/Header/index.vue | 4 +-
src/views/home/index.vue | 6 ++-
components.d.ts | 1
src/layout/index.vue | 18 +++++++++
src/App.vue | 14 +-----
src/router/index.js | 20 +++++++++-
6 files changed, 46 insertions(+), 17 deletions(-)
diff --git a/components.d.ts b/components.d.ts
index 059f80d..c0ddc14 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,6 +8,7 @@
declare module 'vue' {
export interface GlobalComponents {
ElButton: typeof import('element-plus/es')['ElButton']
+ ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
Header: typeof import('./src/components/Header/index.vue')['default']
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/src/App.vue b/src/App.vue
index b93b427..ab49f3c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,17 +2,9 @@
</script>
<template>
- <div class="page-container w-screen h-screen flex flex-col">
- <Header></Header>
- <div class="page-content w-screen grow relative">
- <div class="page-wrapper bg-slate-50 absolute top-0 left-0 right-0 bottom-0 overflow-y-auto">
- <RouterView />
- </div>
- </div>
+ <div class="page-container w-screen h-screen">
+ <RouterView />
</div>
-
</template>
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/src/components/Header/index.vue b/src/layout/components/Header/index.vue
similarity index 98%
rename from src/components/Header/index.vue
rename to src/layout/components/Header/index.vue
index c1fccf3..b7082a9 100644
--- a/src/components/Header/index.vue
+++ b/src/layout/components/Header/index.vue
@@ -29,10 +29,10 @@
<script setup>
import { ref, watchEffect } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute,useRouter } from 'vue-router';
const route = useRoute();
-
+console.log(route);
const menuList = ref([
{
name: '棣栭〉',
diff --git a/src/layout/index.vue b/src/layout/index.vue
new file mode 100644
index 0000000..6811d3f
--- /dev/null
+++ b/src/layout/index.vue
@@ -0,0 +1,18 @@
+<script setup>
+import Header from './components/Header/index.vue';
+</script>
+
+<template>
+ <div class="page-container w-screen h-screen flex flex-col">
+ <Header></Header>
+ <div class="page-content w-screen grow relative">
+ <div class="page-wrapper bg-slate-50 absolute top-0 left-0 right-0 bottom-0 overflow-y-auto">
+ <el-scrollbar>
+ <RouterView />
+ </el-scrollbar>
+ </div>
+ </div>
+ </div>
+</template>
+
+<style scoped></style>
diff --git a/src/router/index.js b/src/router/index.js
index 37356bd..725e29e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,13 +1,29 @@
import { createMemoryHistory, createRouter } from 'vue-router';
+import Layout from '@/layout/index.vue';
const routes = [
{
path: '/',
redirect: '/index'
},
- { path: '/index', component: () => import('@/views/home/index.vue') },
- { path: '/menu', component: () => import('@/views/menu/index.vue') },
+ {
+ path: '/',
+ component: Layout,
+ children: [
+ {
+ path: 'index',
+ name: 'index',
+ component: () => import('@/views/home/index.vue'),
+ },
+ {
+ path: 'menu',
+ name: 'menu',
+ component: () => import('@/views/menu/index.vue')
+ },
+ ]
+ },
+
];
const router = createRouter({
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index a116b22..a95cc65 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,8 +1,10 @@
<template>
- 123
+
</template>
<script setup>
</script>
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
--
Gitblit v1.8.0