chore:封装layout

ZhangXianQiang

2024-06-03 799effa8be2462cde6986cf7e13d9d99b29e8ae6

chore:封装layout

 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']

 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>

 src/layout/components/Header/index.vue

File was renamed from src/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: '首页',

 src/layout/index.vue

New file
@@ -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>

 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({

 src/views/home/index.vue

@@ -1,8 +1,10 @@
<template>
  123
  
</template>

<script setup>
</script>

<style lang="scss" scoped></style>
<style lang="scss" scoped>

</style>