【微人事项目笔记】6、使用面包屑改善首页

Home.vue的增加代码如下，

                <el-main>
                    <el-breadcrumb separator-class="el-icon-arrow-right" v-if="this.$router.currentRoute.path!='/home'">
                        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <div class="homeWelcome" v-if="this.$router.currentRoute.path=='/home'">
                        欢迎来到微人事！
                    </div>
                    <router-view></router-view>
                </el-main>

再增加一些css样式

<style>

    .homeWelcome{
        text-align: center;
        font-size: 30px;
        color: #409eff;
    }
</style>

测试，点击高级资料，面包屑对应变化

点击面包屑的首页，效果如下，