1: HeaderTop.vue :

面包屑:el-breadcrumb 定义面包屑, separator是分隔符。

         el-breadcrumb-item: 是面包屑中用 分隔符 分开的多个items.

          $route.meta的数据来源是router的定义:   v-for="(item, index) in $route.meta" 会依次取出 “数据管理” “商家列表”,index从0开始,依次1,2,

        {
        path: '/shopList',
        component: shopList,
        meta: ['数据管理', '商家列表'],
         }
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/manage' }">首页</el-breadcrumb-item>
<el-breadcrumb-item v-for="(item, index) in $route.meta" key="index">{{item}}</el-breadcrumb-item>
</el-breadcrumb>

2:    下面看头像的部分:

el-dropdown:   @command,在点击el-dropdown-item的时候,会把command=“home”当做参数传到handelCommand函数。
<el-dropdown @command="handleCommand" menu-align='start'>
<img :src="baseImgPath + adminInfo.avatar" class="avator">
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="home">首页</el-dropdown-item>
<el-dropdown-item command="singout">退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>

11 Vue学习 headtop的更多相关文章

  1. 11.VUE学习之提交表单时拿到input里的值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. Vue 学习顺序

    起步: 1.扎实的 JavaScript / HTML / CSS 基本功,ES6 最好过一遍 2.通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script&g ...

  3. VUE学习总结

    VUE学习总结 文档:https://cn.vuejs.org/v2/guide/ Webstorm的一些常用快捷键:1. ctrl + shift + n: 打开工程中的文件,目的是打开当前工程下任 ...

  4. vue 学习 渲染、v-指令

    vue渲染 在组件中data是一个方法里面的值要是一个对象return出去 export default { name: "HelloWorld", data() { return ...

  5. day 83 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui

      Vue学习之五DIY脚手架.webpack使用.vue-cli的使用.element-ui   本节目录 一 vue获取原生DOM的方式 二 DIY脚手架 三 vue-cli脚手架的使用 四 we ...

  6. day 82 Vue学习三之vue组件

      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...

  7. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  8. Vue学习笔记-Django REST framework3后端接口API学习

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  9. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

随机推荐

  1. nginx could not build the server_names_hash 解决方法

    nginx “nginx could not build the server_names_hash”解决方法 给一个服务器下增加了一些站点别名,差不多有20多个. 重启nginx时候,提示: cou ...

  2. XMPP资源绑定(Resource Binding)

    一个XMPP的账号由三部分组成: 用户名(user/node),域名(domain)和资源(resource) .例如 alice@xmpp.irusher.com/mobile ,user部分(或n ...

  3. ASP.NET MVC4+BootStrap 实战(一)

    好久没有写关于web开发的文章了,进到这个公司一直就是winform和Silverlight,实在是没有实战web项目的机会.大D也辞职了,去搞web app了.自己也该闲暇时间多学习学习,每天进步一 ...

  4. python 基础 1.5 数据类型(二)--列表

    一.python 数据类型序列---列表 1.列表是可变型的数据类型.列表里边的元素是可变的,可以增加,可以删除.   2.列表(list)是处理一组有序项目的数据结构,即可以在列表中存储一个序列的项 ...

  5. 再看GS线程

    再看GS线程 void GameServer::ProcessThreadTry() { ; packet rcvPkt; rcvPkt.data = * ]; //该事件工厂主要创建了两个定时器1. ...

  6. TensorFlowSharp

    https://github.com/migueldeicaza/TensorFlowSharp

  7. 五个知识体系之-SQL学习-第二天

    创建数据:INSERT INTO userinfo(userid,username,job,level1,companyage) VALUES ('001','xl001','test','P1',' ...

  8. Notepad工具使用小技巧

    工欲善其事必先利其器 Notepad++是个很不错的文本编辑工具,掌握它的使用技巧可以提高我们工作的效率.见如下: 比较常用的罗列如下:(如果有更好的建议可以留言哈) 1: 添加书签 CTRL+F2 ...

  9. ajax学习笔记(3)--$.get()方法

    <head runat="server"> <title>jQuery中的$.get()方法</title> <script src=&q ...

  10. 辛星跟您玩转vim第四节之操作文本内容

    首先值得一提的是.我的vim教程pdf版本号已经写完了.大家能够去下载,这里是csdn的下载地址:csdn下载,假设左边的下载地址挂掉了,也能够自行在浏览器以下输入例如以下地址进行下载:http:// ...