動態(tài)導(dǎo)航顧名思義，就是通過點擊menu菜單，實現(xiàn)上方動態(tài)路由的現(xiàn)實，方便用戶使用。那如何封裝一個動態(tài)組件：

<template>
  <div class="navi">  //判斷是否是當(dāng)前路由
    <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 //當(dāng)前路由
    };
  },
  props: {
    naviArr: {
      type: Array,
      default: () => {
        return [];
      },
    }
  },
  created() {  //進行去重，結(jié)合上一篇文章的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){    //***監(jiān)聽路由的變化
        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>