实现动态导航

动态导航顾名思义，就是通过点击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>