动态导航顾名思义，就是通过点击menu菜单，实现上方动态路由的现实，方便用户使用。那如何封装一个动态组件：
<template>
<div class="navi"> //判断是否是当前路由
<div :class="currentPath == v.url ? 'navi_div active' : 'navi_div'" v-for="(v, i) in naviArrs" :key="i" @mousemove="moveActive(v)" @click="toPath(v)">
<span>{{ v.name }}</span>
<i class="el-icon-circle-close" @click="delNavi(v)"></i>
</div>
</div>
</template>
<script>
import typeUtils from "commons/common/typeUtils";
import { mapActions,mapState } from "vuex";
export default {
data() {
return {
naviArrs: [],
currentPath:this.$route.path //当前路由
};
},
props: {
naviArr: {
type: Array,
default: () => {
return [];
},
}
},
created() { //进行去重，结合上一篇文章的menu
this.naviArrs = typeUtils.arrSet(this.naviArr, "name");
},
watch: {
naviArr(val, oldVal) {
this.naviArrs = typeUtils.arrSet(val, "name");
this.pathListFunAsync(this.naviArrs)
},
$route(val,oldVal){ //***监听路由的变化
this.currentPath = val.path
},
},
methods:{
...mapActions('paths',['pathListFunAsync']),
moveActive(val){
this.currentPath = val.url
},
delNavi(val){
this.naviArrs.forEach((v,i) => {
if (v.name == val.name) {
this.naviArrs.splice(i,1)
}
})
},
toPath(val){
this.$router.push(val.url)
}
}
};
</script>
