vue项目第四天

使用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-tagv-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,即使调整代码）