溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue+elementUI動態(tài)生成面包屑導(dǎo)航教程

發(fā)布時間：2020-10-19 20:02:11 來源：腳本之家 閱讀：296 作者：sun shying 欄目：web開發(fā)

效果如下所示：

vue+elementUI動態(tài)生成面包屑導(dǎo)航教程

項目需要動態(tài)生成面包屑導(dǎo)航,并且首頁可以點擊.其余為路徑顯示

<el-menu :unique-opened="true" router :default-active="$route.path" @select="handleSelect">
    <div class="user-menu-box" v-for="menu in menus" :key="menu.id">
      <el-menu-item v-if="!menu.child" :index="menu.path">
        <icon :name="menu.icon" :w="20" :h="20"></icon>
        <span slot="title" v-text="menu.name"></span>
      </el-menu-item>
      <el-submenu v-if="menu.child" :index="menu.path">
        <template slot="title">
          <icon :name="menu.icon" :w="20" :h="20"></icon>
          <span slot="title" v-text="menu.name"></span>
        </template>
        <el-menu-item-group>
          <el-menu-item v-for="subMenu in menu.child" :key="subMenu.id" v-text="subMenu.name"
            :index="subMenu.path"></el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </div>
</el-menu>

上面的代碼是elementUI組件的樣式,根據(jù)項目需要做了修改,搬運的時候根據(jù)項目自己改改

export default {
  data () {
    return {
      activeMenu: '',
      indexBreadcrumbs: [],
      menus: [{
        id: '1',
        name: '門戶管理',
        icon: 'menhuguanli',
        path: '#2',
        child: [{
          id: '1-1',
          name: '輪播圖',
          path: '/backstage/protaManage/turns'
        }, {
          id: '1-2',
          name: '基礎(chǔ)數(shù)據(jù)',
          path: '/backstage/protaManage/basis'
        }, {
          id: '1-3',
          name: '分類管理',
          path: '/backstage/protaManage/classify'
        }, {
          id: '1-4',
          name: '內(nèi)容發(fā)布',
          path: '/backstage/protaManage/content'
        }]
      }, {
        id: '2',
        name: '我的云盤',
        icon: 'yunpan',
        path: '/backstage/yunManage'
      }, {
        id: '3',
        name: '管理菜單',
        icon: 'shezhi',
        path: '/backstage/menusManage'
      }, {
        id: '4',
        name: '編輯板塊',
        icon: 'fabuzhongxin',
        path: '/backstage/editPlate'
      }]
    }
  },
  watch: {
    $route () {
      this.handChange()
    }
  },
  computed: {
    breadcrumbList () {
      let breadcrumbs = []
      let menuList = this.menus
      this.indexBreadcrumbs.map(item => {
        for (let i = 0; i < menuList.length; i++) {
          if (item === menuList[i].path) {
            breadcrumbs.push(menuList[i])
            if (menuList[i].child) {
              menuList = menuList[i].child
            }
            break;
          }
        }
      })
      return breadcrumbs
    }
  },
  methods: {
    handChange () {
      this.$emit('hand-change', this.breadcrumbList)
    },
    handleSelect (index, indexPath) {
      this.indexBreadcrumbs = indexPath
    }
  },
  created () {
    this.handChange()
  }
}

上面的代碼是模擬的數(shù)據(jù),調(diào)用elememtUI的組件導(dǎo)航菜單的中的@select方法,有兩個參數(shù),可以自行打印

vue+elementUI動態(tài)生成面包屑導(dǎo)航教程

然后在computed中計算當(dāng)前選中的是哪一部分,取到返回值,然后$emit傳給父組件,

<el-breadcrumb separator-class="el-icon-arrow-right">
   <el-breadcrumb-item :to="{ path: '/backstage' }">首頁</el-breadcrumb-item>
   <el-breadcrumb-item v-for="o in breadcrumbList" :key="o.id">{{o.name}}
   </el-breadcrumb-item>
 </el-breadcrumb>

父組件中取到子組件傳過來的值后,直接渲染就行了

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手