Vue3实现页面布局复用

一、思路

1.首先，将公共的页面布局提取出来作为一个新的.vue组件

2.为这个公共的组件配置子路由（子路由组件可以看作是基于这个公共组件的具体实现）

二、举例实现（假设我要固定左边菜单栏）

1.公共父组件(DefaultLayout.vue)

<script setup>
import { useRouter } from 'vue-router'
const router=useRouter()

</script>
<template>
  <div class="layout">
    <!-- 固定左侧菜单 -->
    <div>
      <ul>
        <li><router-link to="/index">首页</router-link></li>
        <li><router-link to="/contentManage">内容管理</router-link></li>
        <li><router-link to="/setting">设置</router-link></li>
      </ul>
    </div>
    <!-- 子页面内容区域 -->
    <main>
      <router-view/>
    </main>
  </div>
</template>

2.路由配置(index.js)

import { createRouter, createWebHistory } from 'vue-router'

import Index from '../views/index.vue'
import Setting from '../views/setting.vue'
import ContentManage from "@/views/contentManage.vue";

import DefaultLayout from "@/layouts/DefaultLayout.vue";

const routes = [
    {
        path:'/',
        component:DefaultLayout,
        children:[
            {
                path:'index',name:'index',component:Index 
            },{
                path:'setting',name:'setting',component:Setting
            },{
                path:'contentManage',name:'contentManage',component:ContentManage
            }
       ] 
      //访问/index,/setting,/contentManage这三个页面时，就会共用同一个左侧选项菜单
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

3.具体页面

- index.vue,contentManage.vue,setting.vue三个子组件只需要专注各自的内容，这里只做一个简单示范。

<script setup>

</script>
<template>
      <div>
        <h1>首页内容</h1>
        <p>这是首页的主体内容区域。</p>
      </div>
</template>
<style scoped>

</style>