系列文章目录
Vue + Element-UI —— 项目实战（零）（项目概述）
六、项目实战六
Ⅰ、面包屑切换功能
1. 面包屑数据处理
- 在 views 文件夹下创建 ./mall/index.vue 和 ./other/pageOne.vue 和 ./other/pageTwo.vue 文件
- 在 ./router/index.js 中配置路由
{
path: "/mall",
name: "mall",
component: mall,
},
{
path: "/page1",
name: "page1",
component: pageOne,
},
{
path: "/page2",
name: "page2",
component: pageTwo,
}
2. 使用 vuex 进行通信
- 在 ./store/tab.js 中进行相关配置（配置初始数据）
state: {
// 定义首页导航初始数据（面包屑）
tabsList: [
{
path: '/',
name: 'home',
label: '首页',
icon: 'home'
}
],
// 是否高亮
currentMenu: null,
menu: []
},
- 在 ./store/tab.js 中进行相关配置（配置 mutations）
mutations: {
// 改变state中的tabsList数据
selectMenu(state, val) {
// 当前点击的菜单不是首页
if(val.name !== 'home') {
// currentMenu 等于传入进来的数据
state.currentMenu = val
// 拿到当前选中项的索引（看看存不存在）
const result = state.tabsList.findIndex(item => item.name === val.name)
// 不存在的时候添加数据
if(result === -1) {
state.tabsList.push(val)
}
}else{
// 是首页就对当前选中的标识重置
state.currentMenu = null
}
},
}
- 在 CommonAside.vue 中添加点击事件
clickMenu(item) {
// 点击进行页面跳转 使用的是push方法
this.$router.push({
name: item.name,
});
// item为对应的menu的数据
this.$store.commit('selectMenu', item)
}
- 在 CommonHeader.vue 中注入数据
<!-- 面包屑 -->
<el-breadcrumb separator="/">
<!-- 遍历面包屑的数据 -->
<el-breadcrumb-item v-for="item in tags" :key="item.path" :to="{ path: item.path }">{
{
item.label}}</el-breadcrumb-item>
</el-breadcrumb>
computed: {
...mapState({
// 面包屑数据
tags: state => state.tab.tabsList
})
}
Ⅱ、Tag 切换功能
1. tag 页面
- 创建 CommonTag.vue 文件
<template>
<div class="tabs">
<!--
:closable：除了首页以外的tag都可关闭
:effect：主题，路由和tag名称一样的显示高亮
-->
<el-tag
v-for="(tag, index) in tags"
:key="tag.name"
:closable="tag.name !== 'home'"
:effect="$route.name === tag.name ? 'dark' : 'plain'"
@click="changeMenu(tag)"
@close="handleClose(tag, index)"
size="small"
>
<!-- 显示对应的名称 -->
{
{
tag.label}}
</el-tag>
</div>
</template>
<script>
import {
mapState, mapMutations} from 'vuex'
export default {
name: 'CommonTag',
data() {
return {
}
},
computed: {
...mapState({
// tags对应vuex中的tabsList
tags: state => state.tab.tabsList
})
},
methods:{
...mapMutations({
close: 'closeTag'
}),
changeMenu(item){
// 路由的切换
this.$router.push({
name: item.name})
},
handleClose(tag, index) {
// 拿到tag的总长度
const length = this.tags.length - 1
// 调用mutations里面的closeTag方法
this.close(tag)
// 删除的tag名字不是当前的路由名字，则不用删除
if(tag.name !== this.$route.name){
return;
}
// 最右侧的tag
if(index === length) {
this.$router.push({
name: this.tags[index-1].name //向左跳转
})
// 删除的tag在中间，向右跳转
} else {
this.$router.push({
name: this.tags[index].name
})
}
}
}
};
</script>
<style lang="less" scoped>
.tabs {
padding: 20px;
.el-tag {
margin-right: 15px;
cursor: pointer;
}
}
</style>
2. 关闭标签函数
- 在 tab.js 的 mutations 中定义关闭 tag 的函数
closeTag(state, val) {
// 找到当前的标签
const result = state.tabsList.findIndex(item => item.name === val.name)
// 将它从数据源中删掉
state.tabsList.splice(result, 1)
},
3. 主页面展示
- 在 main.js 中的 头部 和 主体 部分之间显示该部分组件
<el-container>
<el-header>
<common-header></common-header>
</el-header>
<!-- 头部下面的编辑标签 -->
<common-tag></common-tag>
<!-- 主体部分 -->
<el-main>
<router-view></router-view>
</el-main>
</el-container>
// 在 Main.vue 中导入tag公共样式
import CommonTag from "@/components/CommonTag.vue";
不积跬步无以至千里 不积小流无以成江海
点个关注不迷路（持续更新中…）