2 03.后台主布局实现

接上篇 动态页面标题实现，这里我们实现整个后台页面的布局

• 定义组件

  • • src/layouts/admin.vue

    • src/layouts/components/FHeader.vue

    • src/layouts/components/FMain.vue

    • src/layouts/components/FTagList.vue

// src/layouts/admin.vue
<template>
    <el-container>
        <el-header>
            <f-header/>
        </el-header>

        <el-container>
            <el-aside>
                <f-main/>
            </el-aside>

            <el-main>
                <f-tag-list/>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>


<script setup>
import FHeader from './components/FHeader.vue';
import FMain from './components/FMain.vue';
import FTagList from './components/FTagList.vue';
</script>

// src/layouts/components/FHeader.vue
<template>
    <div>
        头部
    </div>
</template>


// src/layouts/components/FMain.vue
<template>
    <div>
        主体
    </div>
</template>

// src/layouts/components/FTagList.vue
<template>
    <div>
        标签
    </div>
</template>ate>

• 修改路由

  src/router/index.js

// 2.定义一些路由
const routes = [
    { 
        path: "/", 
        component: Admin, 
        children:[{
            path: "/", 
            component: Index,
            meta: { 'title': '首页' } 
        }]

    },


    { path: "/about", component: About, name: "about", meta: {'title': '关于'}},
    { path: "/login", component: Login, name: "login", meta: {'title': '登录'}},
    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound, meta: {'title': '404'} },
]