使用elementui tabplane组件实现历史访问记录组件的二次封装
<el-tabs type="border-card">
<el-tab-pane label="用户管理">用户管理</el-tab-pane>
<el-tab-pane label="配置管理">配置管理</el-tab-pane>
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
</el-tabs>分装一个基本的历史记录组件
<template>
<div class="history">历史记录</div>
</template>
<script>
export default {
name: "myhistory",
props: { //父组件向子组件传值
hisArr: {
type: Array, //数据类型为 对象
default: () => [], //如果数据类型为 数组或者对象的情况下，要写成这种模式
},
},
};
</script>通过父组件控制该组件的显示
<!-- 使用历史记录组件
history 数据控制组件的动态挂载
-->
//如果有长度证明用户已经访问了，没有长度，表示用户没有访问
<History v-show="history.length" :hisArr="history"></History>分析历史记录组件中的数据为用户访问的二级路由名称
点击触发路由执行路由的全局前置，可以直接使用to进入的路由对象
输出to当前路由对象在meta源信息上添加自定义属性携带中文名称。
在router下的index.js文件中进行改,有一个meta属性，可以传一些自定义的数据
接下来使用vuex状态机 进行状态管理
项目中封装vuex模块化
安装 cnpm i --save-dev vuex@3
封装文件的基本写法
/*
封装vuex
*/
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//实例化状态机
const store=new Vuex.Store({
});
export default store;
//需要设置options
vuex的五大核心
state mutations 唯一修改state位置 且官方要求同步代码
getters actions 异步分发 modules 模块化构建
构建基本封装目录
实现mutations中添加业务
export default {
// 添加的业务
/**
* @params {对象型 path name} payload
* **/
[ADD_HISTORY](state, payload) {
let { history } = state;
//检测是否存在
let ishas = history.some((item, index) => {
return item.path == payload.path;
});
!ishas && history.push(payload);
},
};将唯一store对象关联vue全局
//引入store
import store from "./store";
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");组件中使用vuex的辅助函数 映射vuex状态机的操做方法以及state到当前组件。
组件上直接使用计算属性
守卫中添加路由信息到vuex状态机
elementui组件二次封装
<template>
<div class="history">
<el-tag
v-for="(tag, index) in hisArr"
:key="tag.payload.name"
closable
@close="remove(index)"
>
<router-link :to="tag.payload.path"> {{ tag.payload.name }}</router-link>
</el-tag>
</div>
</template>
//对tag组件进行封装
在父组件中使用二次封装组件
和状态机关联使用操做history状态
最终测试效果。
点击当前历史记录，当前历史记录变色
普通变量索引记录，在html节点上使用elementui组件的color属性通过判断添加动态颜色
实现基本效果之后，注意可能存在切换的bug（注意index,即使调整代码）
