11 Vue学习 headtop

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>

转载于:https://www.cnblogs.com/liufei1983/p/8744267.html

11 Vue学习 headtop相关推荐

Vue 学习第八天
Vue 学习第八天 1. 了解了回掉函数的使用,了解了文件的读取, 2.Promise 函数讲解 console.dir(Promise) //Promise 函数讲解 //1.其是一个构造函数,既 ...
Vue 学习第六天学习笔记
Vue 学习第六天学习笔记 1.webpack 使用复习第一步:先建立文件夹. 第二步,用webpack将其初始化,建立管理.npm 的包管理工具管理起来, npm init -y .注意{查 ...
Vue 学习第五天学习笔记
Vue 学习第五天 1. keyup事件 <div id="app"> <input type="text" v-model=" ...
Vue学习小案例--分页组件封装
文章目录 Vue学习小案例--分页组件封装修改成Vue(使用组件) Vue学习小案例–分页组件封装 index.html <!DOCTYPE html> <html lang=&q ...
Vue学习7-MinUI组件与项目托管到码云上
上一篇 Vue学习6-(webpack发布策略) 下一篇 Vue学习8-项目实战一:完成header.tabbar区域.路由组件切换与轮播图功能 MinUI组件与码云一.使用render函数渲染组件 ...
day4 vue 学习笔记组件生命周期数据共享数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记过滤器侦听器计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记组件生命 ...
Vue学习随笔+商城项目【上】
更新日期:2021-02-10 晚 [新年快乐] 附:Vue学习随笔+商城项目[下] 目录(部分) (一)ES6补充 1.1块级作用域 1.1.1 什么是变量作用域 1.1.2 没有块级作用域造成的问 ...
【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
day 83 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui
Vue学习之五DIY脚手架.webpack使用.vue-cli的使用.element-ui 本节目录一 vue获取原生DOM的方式二 DIY脚手架三 vue-cli脚手架的使用四 webpac ...
十天学完Vue学习总结
一.学习时间的安排每次学习一门新语言的时候,我会习惯性创建一个文件夹,到我学完Vue基础时一共用了十天的时间.每一天几乎是一个知识点,或者是知识点对于的作业或者是项目. 二.共有多少个知识点可以学习 ...

11 Vue学习 headtop

11 Vue学习 headtop相关推荐

最新文章

热门文章