Vue_笔记07（）

_06遗留的问题:

解决：

在CommonAside加入判断（当页面路由与跳转不一致才允许跳转）：

  clickmenu(item) {
            console.log(item);
            //当页面路由与跳转路由不一致时才允许跳转
            if (this.$route.path !== item.path && !(this.$route.path === '/home' && (item.path == '/'))) {
                this.$router.push(item.path);
            }

        }

1）header组件搭建
目标实现：

 （1）加入组件CommonHeader.vue（布局为左侧一个按钮和旁边的面包屑区，右侧有头像，同时点击头像，会有下拉菜单）

<template>
    <div class="header-container">
        <div class="l-content">
            <el-button icon="el-icon-menu" size="mini"></el-button>
            <!-- 面包屑 -->
            <span class="text">首页</span>
        </div>
        <div class="r-content">
            <el-dropdown>
                <span class="el-dropdown-link">
                    <img class="user" src="../assets/user.jpg" alt="">
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item>退出</el-dropdown-item>

                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>
<script>
export default {

    data() {
        return {}
    }
}
// 顶部样式
</script>
<style lang="less" scoped>
.header-container {
    padding: 0 15px;
    background-color: #333;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .text {
        padding: 0 5px;
        color: aliceblue;
        font-size: 14px;
        margin: 10 px;
    }

    .r-content {
        .user {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
    }
}
</style>

在Main.vue引入该组件并渲染：

<template>
    <div>

        <el-container>
            <el-aside width="200px">
                <common-aside />
            </el-aside>
            <el-container>
                <!-- 顶部渲染 -->
                <el-header>
                    <common-header />
                </el-header>
                <el-main>
                    <!-- 路由出口，渲染 -->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>

    </div>
</template>
<script>
import CommonAside from '../components/CommonAside.vue';
import CommonHeader from '../components/CommonHeader.vue';
export default {
    data() {
        return {};
    },
    components: { CommonAside, CommonHeader }
}
</script>
<style>
.el-header {
    padding: 0;
}
</style>