快捷導(dǎo)航

Vue實現(xiàn)面包屑導(dǎo)航的正確方式

更新時間：2023年06月20日 16:45:51 作者：小沈陽

面包屑導(dǎo)航(BreadcrumbNavigation)這個概念來自童話故事“漢賽爾和格萊特”，它的作用是告訴訪問者他們在網(wǎng)站中的位置以及如何返回，本文為大家介紹了實現(xiàn)面包屑導(dǎo)航的正確方式，需要的可以參考一下

前言

面包屑導(dǎo)航(BreadcrumbNavigation)這個概念來自童話故事“漢賽爾和格萊特”，當(dāng)漢賽爾和格萊特穿過森林時，不小心迷路了，但是他們發(fā)現(xiàn)沿途走過的地方都撒下了面包屑，讓這些面包屑來幫助他們找到回家的路。所以，面包屑導(dǎo)航的作用是告訴訪問者他們在網(wǎng)站中的位置以及如何返回。

正如童話故事里的面包屑的作用，網(wǎng)站中的面包屑組件是為了告訴我們在網(wǎng)站中的位置。

然而，在看了一些 admin 項目后，發(fā)現(xiàn)面包屑的使用并不符合邏輯。

以 82k+ star 的 vue-element-admin 為例：

我們發(fā)現(xiàn)點擊某篇文章的編輯后，導(dǎo)航路徑從首頁/綜合實例/文章列表變?yōu)?首頁/綜合實例/編輯文章，而用戶正確的路徑是首頁/綜合實例/文章列表/編輯文章。

分析 vue-element-admin 這種行為的原因

這里貼上其官網(wǎng)自動生成面包屑的代碼：

function getBreadcrumb() {
  // only show routes with meta.title
  let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
  const first = matched[0]
  if (!this.isDashboard(first)) {
    matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
  }
  this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
}

我們可以發(fā)現(xiàn)作者用到了 $route.matched，它的作用是：一個路由匹配到的所有路由記錄會暴露為 $route 對象(還有在導(dǎo)航守衛(wèi)中的路由對象)的 $route.matched 數(shù)組。

那么我看來看看其路由是如何注冊的：

可以看到列表和編輯被注冊到了同一級，matched 最后自然不會包含列表這一級。而且我們可以看到完全使用 matched 的缺點：

圖中有一級綜合實例，這個路徑是因為在路由注冊時，它與列表或者編輯頁面形成了上下級關(guān)系。

所以，如果你的系統(tǒng)可以接收這個效果，可以參考 vue-element-admin 的行為。

怎么生成正確的路徑

至于怎么生成正確的路徑，如：首頁/綜合實例/文章列表/編輯文章。

我的方案是：每個頁面都寫自己的面包屑路徑！

這是最靈活，適應(yīng)性最強(qiáng)的一種方式了，當(dāng)然缺點也非常明顯，如果你的頁面很多，那改動的成本將會非常高。

所以，我又研究了第二種方式，它依舊是依賴于路由數(shù)據(jù)生成的。

當(dāng)然前面我們已經(jīng)知道了 router 注冊的數(shù)組，只能表示組件在頁面結(jié)構(gòu)上的一些父子關(guān)系，并不能正確表示用戶訪問的路徑。

所以我們需要額外維護(hù)一份，表示頁面訪問關(guān)系的樹形結(jié)構(gòu)（可以是環(huán)形，但是代碼需要額外處理，且不一定能表示正確的用戶訪問路徑，我們此次不討論）。

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import ListView from '@/views/ListView.vue'
import EditView from '@/views/EditView.vue'
import {useBreadcrumbStore} from "@/store/useBreadcrumbStore";
import DetailView from "@/views/DetailView.vue";
import _ from "lodash";
import ForthView from "@/views/ForthView.vue";
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      meta: {
        title: '首頁'
      },
      component: HomeView
    },
    {
      path: '/list',
      name: 'list',
      meta: {
        title: '列表'
      },
      component: ListView
    },
    {
      path: '/detail',
      name: 'detail',
      meta: {
        title: '詳情',
      },
      component: DetailView
    },
    {
      path: '/forth',
      name: 'forth',
      meta: {
        title: '第四級頁面',
      },
      component: ForthView,
    },
    {
      path: '/edit',
      name: 'edit',
      meta: {
        title: '編輯'
      },
      component: EditView
    },
    {
      path: '/about',
      name: 'about',
      meta: {
        title: '關(guān)于'
      },
      component: () => import('../views/AboutView.vue')
    }
  ]
})
const breadcrumbsStruct = [
  {
    name: 'home',
    children: [
      {
        name: 'list',
        children: [
          {
            name: 'edit'
          },
          {
            name: 'detail',
            children: [
              {
                name: 'forth',
              },
            ],
          }
        ]
      }
    ]
  },
  {
    name: 'about'
  }
]
router.afterEach((to) => {
  const target = to.name;
  const data: string[] = []
  let finalData = data;
  function dfs(arr: any[]) { // 在 breadcrumbsStruct 查找 target，且記錄下樹上的路徑
    if (!arr || !arr.length) {
      return;
    }
    for (let i=0; i<arr.length; i++) {
      const item = arr[i];
      data.push(item.name);
      if (item.name === target) {
        finalData = _.cloneDeep(data);
        break;
      }
      // 向深一級查找，查不到應(yīng)該回溯
      dfs(item.children);
      data.pop();
    }
  }
  dfs(breadcrumbsStruct);
  const routeList = router.getRoutes();
  const routeInfoList = finalData.map(item => {
      const info = routeList.find(r => r.name === item);
      if (info) {
        return info;
      } else {
        console.error('構(gòu)建路徑失敗');
      }
  });
  const store = useBreadcrumbStore();
  store.setBreadcrumbs(routeInfoList);
})
export default router

出了 router 的注冊外，額外維護(hù)一份 breadcrumbsStruct 數(shù)據(jù)，其中 name 用于 router 中注冊的頁面匹配，為了方便匹配，規(guī)定它是不能重復(fù)的。children 表示從這個頁面可以打開哪些頁面。

在 afterEach 路由鉤子中，我們利用回溯算法生成面包屑數(shù)據(jù)。

完整的工程代碼在此處。