Vue 驾驭数据，赋能路由：点亮面包屑导航，标签栏随心切换

2023-07-07 17:16:54

利用 Vue-Router 和 Element Plus 构建动态的面包屑导航栏和路由标签栏

作为一名现代化的前端开发者，我们不断探索提升用户体验的方法。面包屑导航栏 和路由标签栏 是两种强大的工具，可以帮助用户轻松浏览我们的应用程序。本文将指导您使用 Vue-Router 和 Element Plus 构建这些实用且美观的组件。

面包屑导航栏：指引用户前进

面包屑导航栏就像网站上的路标，清晰地显示当前页面在应用程序层级结构中的位置。

构建您的面包屑导航栏

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item :to="{ path: '/about' }">关于我们</el-breadcrumb-item>
</el-breadcrumb>

这段代码创建一个带分隔符（"/"）的面包屑导航栏。它包含指向主页和“关于我们”页面的链接。

动态更新面包屑

为了让面包屑随着用户浏览应用程序而自动更新，我们可以在路由守卫中添加以下代码：

router.beforeEach((to, from, next) => {
  // 提取匹配的组件和面包屑信息
  const matchedComponents = router.resolve(to).matched;
  const matchedBreadcrumb = matchedComponents.filter((item) => item.meta && item.meta.breadcrumb);

  // 构建面包屑数据
  if (matchedBreadcrumb.length) {
    breadcrumbs.value = matchedBreadcrumb.map((item) => {
      return {
        path: item.path,
        name: item.meta.breadcrumb,
      };
    });
  }

  // 继续路由导航
  next();
});

路由标签栏：快速页面切换

路由标签栏允许用户轻松切换打开的页面，就像浏览器的选项卡一样。

布局您的标签栏

<el-tabs v-model="activeTab">
  <el-tab-pane :key="item.path" :label="item.name" :name="item.path">
    <router-view :key="item.path" />
  </el-tab-pane>
</el-tabs>

这段代码创建一个使用 v-model 双向绑定的选项卡式标签栏。每个选项卡对应一个页面。

动态更新标签栏

为了让标签栏随着路由的变化而动态更新，我们再次使用路由守卫：

router.beforeEach((to, from, next) => {
  // 提取匹配的组件和标签信息
  const matchedComponents = router.resolve(to).matched;
  const matchedTab = matchedComponents.filter((item) => item.meta && item.meta.tab);

  // 构建标签栏数据
  if (matchedTab.length) {
    const tab = {
      path: to.path,
      name: matchedTab[0].meta.tab,
    };
    tabs.value.push(tab);
    activeTab.value = tab.path;
  }

  // 继续路由导航
  next();
});