iview 在導航里面加徽標數

效果圖：

     

代碼如下：

思路：

 1.首先要改變menuList,
 2.從后台獲取，而且這個數據要要變化的，這時我們用watch來監聽它。

<side-menu accordion :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList">
        <!-- 需要放在菜單上面的內容，如Logo，寫在side-menu標簽內部，如下 -->
        <div class="logo-con" @click="returnHome">
          <img v-show="!collapsed" :src="maxLogo" key="max-logo" style="cursor: pointer;"/>
          <img v-show="collapsed" :src="minLogo" key="min-logo" style="cursor: pointer;"/>
        </div>
 </side-menu>

 

js:

<script>
  import sideMenu from './components/side-menu'
  import headerBar from './components/header-bar'
  import tagsNav from './components/tags-nav'
  import user from './components/user'
  import {mapMutations, mapActions} from 'vuex'
  import {getNewTagList, getNextName, getUserInfo} from '@/libs/util'
  import {getLeadsData} from '@/api/data'
  import minLogo from '@/assets/images/logo-min.svg'
  import maxLogo from '@/assets/images/logo.svg'
  import './main.less'
  export default {
    name: 'Main',
    components: {
      sideMenu,
      headerBar,
      tagsNav,
      user
    },
    data() {
      return {
        collapsed: false,
        userName: '',
        minLogo,
        maxLogo,
        allocateCount:'',
        trackCount:'',
        falseData:0,
        menuList:[]
      }
    },
    created() {
      let userName = getUserInfo()
      this.userName = userName.name;
      getLeadsData({}).then(res=>{
        this.allocateCount = res.data.allocateCount;
        this.trackCount = res.data.trackCount;
        this.falseData = 1;
      })
    },
    computed: {
      tagNavList() {
        return this.$store.state.app.tagNavList
      },
      tagRouter() {
        return this.$store.state.app.tagRouter
      },
      userAvator() {
        return this.$store.state.user.avatorImgPath
      },
      cacheList() {
        return this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)) : []
      }
    },
    methods: {
      ...mapMutations([
        'setBreadCrumb',
        'setTagNavList',
        'addTag',
        'getUserInfo'
      ]),
      ...mapActions([
        'handleLogin'
      ]),
      turnToPage(name) {
        this.$router.push({
          name: name
        })
      },
      handleCollapsedChange(state) {
        this.collapsed = state
      },
      handleCloseTag(res, type, name) {
        const nextName = getNextName(this.tagNavList, name)
        this.setTagNavList(res)
        if (type === 'all') this.turnToPage('home')
        else if (this.$route.name === name) this.$router.push({name: nextName})
      },
      handleClick(item) {
        this.turnToPage(item.name)
      },
      //返回到首頁
      returnHome(){
        this.$router.push({
          path: '/home'
        })
      }
    },

    watch: {
      '$route'(newRoute) {
        this.setBreadCrumb(newRoute.matched)
        this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
      },
      falseData(){
        let info = this.$store.getters.menuList
        let oldMenu = getUserInfo().menuNames
        let arr = []
        info.forEach((a)=>{
          if(oldMenu.indexOf(a.meta.title) !==-1 ){
            arr.push(a)
          }
        })
        if(arr.length !== 0){
          for(let i=0;i<arr.length;i++){
            if(arr[i].children.length !== 0){
              let childArr = [];
              arr[i].children.forEach((b)=>{
                if(oldMenu.indexOf(b.meta.title) !==-1 ){
                  if(b.meta.title === 'Leads跟蹤'){
                     b.meta.badge = this.trackCount
                  }
                  if(b.meta.title === 'Leads分配'){
                    b.meta.badge = this.allocateCount
                  }
                  childArr.push(b)
                }
              })
              arr[i].children = childArr
            }
          }
        }
        this.menuList = arr
      }
    },
    mounted() {
      /**
       * @description 初始化設置面包屑導航和標簽導航
       */
      this.setTagNavList()
      this.addTag(this.$store.state.app.homeRoute)
      this.setBreadCrumb(this.$route.matched)
    }
  }
</script>