快捷導(dǎo)航

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

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

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

面包屑導(dǎo)航欄的實(shí)現(xiàn)原理：

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

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

安裝 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)建面包屑導(dǎo)航。你需要在 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">
    <!-- 面包屑導(dǎo)航欄 -->
    <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);
       // 如果路徑相同，點(diǎn)擊導(dǎo)航則不跳轉(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ù)組，并為每一個面包屑項(xiàng)創(chuàng)建一個 <el-breadcrumb-item>。
當(dāng)點(diǎn)擊導(dǎo)航跳轉(zhuǎn)時判斷當(dāng)前路由與跳轉(zhuǎn)的路由一樣時，則不進(jìn)行路由跳轉(zhuǎn)。
通過路由配置里的 affix 屬性判斷是否是固定路由，如果不是就進(jìn)行路由跳轉(zhuǎn)

實(shí)現(xiàn)效果

在這里插入圖片描述

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

總結(jié)

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

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

您可能感興趣的文章: