Element-UI組件實現(xiàn)面包屑導航欄的示例代碼

更新時間：2024年09月12日 09:05:13 作者：你不講 wood

面包屑導航欄是一種用戶界面組件,用于展示用戶在網(wǎng)站或應用中的路徑,它包括了從主頁到當前頁面的鏈接序列,有助于用戶快速了解和導航至上級頁面,本文就來介紹一下Element-UI組件實現(xiàn)面包屑導航欄的示例代碼,感興趣的可以了解一下

面包屑導航欄的實現(xiàn)原理：

路徑記錄與解析：
- 當用戶瀏覽網(wǎng)站時，面包屑導航記錄用戶經(jīng)過的路徑，通常是從主頁到當前頁面的一系列鏈接。
- 每當用戶訪問一個新的頁面時，面包屑導航會根據(jù)當前頁面的路徑信息更新顯示的內(nèi)容。
路由匹配：
- 在單頁應用（SPA）中，如使用 Vue.js 或 React 開發(fā)的應用，面包屑導航通常依賴于前端路由系統(tǒng)。
- 路由系統(tǒng)可以根據(jù)當前激活的路由來確定面包屑的結(jié)構(gòu)。例如，在 Vue Router 中，可以通過 matched 數(shù)組來獲取當前路由匹配的所有嵌套路由記錄。
動態(tài)生成面包屑項：
- 根據(jù)路由匹配的結(jié)果，動態(tài)生成面包屑項。每個面包屑項通常包含一個鏈接，指向該層級對應的頁面。
- 對于每個面包屑項，可以從路由的 meta 屬性中獲取必要的信息，如標題或圖標等。
響應式設計：
- 面包屑導航應當具有良好的響應式設計，以適應不同屏幕尺寸下的布局需求。
- 通常使用 CSS 來控制面包屑項的顯示方式，使其在窄屏設備上也能正確顯示。
用戶交互：
- 用戶可以通過點擊面包屑中的任意一項來快速返回到對應層級的頁面。
- 面包屑導航的最后一項通常是當前頁面，通常是不可點擊的。

使用 Element-UI 組件實現(xiàn)面包屑導航欄

安裝 Element-UI

npm install element-ui --save
# 或者
yarn add element-ui

main.js 文件中引入并使用 Element-UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

使用組件

Element-UI 提供了 <el-breadcrumb> 組件來創(chuàng)建面包屑導航。你需要在 Vue 組件中定義一個數(shù)組來存儲面包屑的信息，并將這些信息展示在面包屑組件中。

示例代碼

定義路由示例：

export const routes = [
  {
    path: '/',
    name: 'redirect',
    component: Layout,
    hidden: true, // 隱藏菜單
    redirect: "/homePage", // 用戶在地址欄輸入 '/' 時會自動重定向到 /homePage 頁面
  },
  {
    path: '/homePage',
    component: Layout,
    redirect: "/homePage/index",
    meta: {
      title: "首頁",
      affix: true, // 固定路由,不跳轉(zhuǎn)
    },
    children: [
      {
        path: 'index',
        name: 'homePageIndex',
        meta: {
          title: "首頁",
        },
        component: () => import('@/views/homePage/index.vue')
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/login.vue'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/error/404.vue'),
    hidden: true
  },
  {
    path: '/401',
    component: () => import('@/views/error/401.vue'),
    hidden: true
  },
  {
    path: '/admin',
    meta: {
      title: "系統(tǒng)管理",
      affix: true
    },
    component: Layout,
    children: [
      {
        path: 'user',
        name: 'userIndex',
        meta: {
          title: "用戶管理",
        },
        component: () => import('@/views/admin/user/index.vue')
      },
      {
        path: 'role',
        name: 'roleIndex',
        meta: {
          title: "角色管理",
        },
        component: () => import('@/views/admin/role/index.vue'),
        children: [
          {
            path: 'add',
            name: 'addRole',
            hidden: true,
            meta: {
              title: "添加角色",
            },
            component: () => import('@/views/admin/user/index.vue')
          },
          {
            path: 'update',
            name: 'updateRole',
            hidden: true,
            meta: {
              title: "編輯角色",
            },
            component: () => import('@/views/admin/role/index.vue')
          }
        ]
      }
    ]
  }
]

這里定義了一級菜單系統(tǒng)管理，二級菜單用戶管理、角色管理，角色管理管理有兩個三級菜單添加角色和編輯角色，由于三級菜單路由配置了 hidden 屬性，所以左側(cè)菜單欄不展示。

頁面展示

在這里插入圖片描述

在模板中使用 <el-breadcrumb> 組件：

<template>
  <div class="tags_view">
    <!-- 面包屑導航欄 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item v-for="item in Breadcrumb" :key="item.path" :to="toPath(item)" class="title">
        {{ item.meta.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'TagsView',
  data() {
    return {
      Breadcrumb: [],

    }
  },
  created() {
    this.genBreadcrumb(this.$route);
  },
  watch: {
    $route() {
      this.genBreadcrumb(this.$route);
    },
  },
  methods: {
    toPath(item) {
      console.log('path::: ', item.meta);
       // 如果路徑相同，點擊導航則不跳轉(zhuǎn)
      if (item.path === this.$route.path) {
        return ''
      }
      // 如果是固定路由，則不跳轉(zhuǎn)
      if (item.meta.affix) {
        return ''
      } else {
      	// 跳轉(zhuǎn)路由
        return item.path
      }

    },
    genBreadcrumb(route) {
      // console.log('route::: ', route);
      // 獲取含有title屬性的路由。
      let matched = route.matched.filter(
        (item) => item.meta && item.meta.title
      );
      this.Breadcrumb = matched;
    },
  },
}
</script>

<style lang="scss" scoped>
.tags_view {
  padding: 15px 0 0 15px;
}

.tags_view .title {
  font-size: 16px !important;

}
</style>

通過監(jiān)聽路由，獲取所有含有title屬性的路由。
使用了 v-for 指令來遍歷 Breadcrumb 數(shù)組，并為每一個面包屑項創(chuàng)建一個 <el-breadcrumb-item>。
當點擊導航跳轉(zhuǎn)時判斷當前路由與跳轉(zhuǎn)的路由一樣時，則不進行路由跳轉(zhuǎn)。
通過路由配置里的 affix 屬性判斷是否是固定路由，如果不是就進行路由跳轉(zhuǎn)

實現(xiàn)效果

在這里插入圖片描述

左側(cè)菜單欄實現(xiàn)參考文章: Elemnt-UI + 遞歸組件實現(xiàn)后臺管理系統(tǒng)左側(cè)菜單

總結(jié)

通過監(jiān)聽路由變化動態(tài)生成面包屑項，并在組件創(chuàng)建時初始化面包屑。面包屑項的標題和路徑通過路由的 meta 屬性獲取，并根據(jù)當前路由路徑?jīng)Q定是否設置跳轉(zhuǎn)路徑。通過這種方式，組件能夠根據(jù)路由變化實時更新面包屑導航欄，提供清晰的導航指引。

到此這篇關于Element-UI組件實現(xiàn)面包屑導航欄的示例代碼的文章就介紹到這了,更多相關Element 面包屑導航欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: