vue 使用localstorage实现面包屑的操作

下面就来详细讲解一下“vue 使用localstorage实现面包屑的操作”的完整攻略。

介绍

面包屑（Breadcrumbs）是一种导航方式，逐级显示访问页面的位置，提升用户体验。在实际开发项目中，经常需要使用面包屑来展示当前所在页面的路径信息。而使用 localStorage 方式记录面包屑信息，则可以让用户在刷新页面或从其他页面跳转回来时仍然可以保留之前的页面导航路径，从而提升用户的使用体验。

实现步骤

接下来就详细介绍如何使用 localStorage 实现面包屑的操作。

1. 创建面包屑组件

在 Vue 中，首先需要创建面包屑组件。代码示例：

<template>
  <div class="breadcrumbs">
    <span v-for="(item, index) in breadcrumbs" :key="index" :class="{ active: index === breadcrumbs.length-1 }">
      {{ item.name }}
    </span>
  </div>
</template>

<script>
export default {
  name: 'Breadcrumbs',
  data() {
    return {
      breadcrumbs: [],
    };
  },
  mounted() {
    const breadcrumbs = JSON.parse(localStorage.getItem('breadcrumbs') || '[]');
    this.breadcrumbs = breadcrumbs;
  },
};
</script>

<style>
.breadcrumbs {
  margin-bottom: 10px;
}
.breadcrumbs span {
  margin-right: 5px;
  color: #1890ff;
  cursor: pointer;
}
.breadcrumbs span.active {
  color: #666;
  cursor: default;
}
</style>

在组件的 data 中定义一个 breadcrumbs 数组，通过 mounted 钩子函数获取 localStorage 中保存的面包屑信息，然后将数据保存到 breadcrumbs 中，并在模板中映射为面包屑导航。

2. 监听路由变化，更新面包屑信息

在 Vue 项目中，通常使用 Vue Router 来管理页面路由。因此，我们需要使用 Vue Router 提供的全局路由守卫 beforeRouteEnter 和 beforeRouteUpdate 来监听路由变化，然后更新面包屑信息。

在面包屑组件中添加如下代码：

<script>
export default {
  name: 'Breadcrumbs',
  data() {
    return {
      breadcrumbs: [],
    };
  },
  watch: {
    $route(to, from) {
      this.getBreadcrumbs();
    },
  },
  mounted() {
    this.getBreadcrumbs();
  },
  methods: {
    getBreadcrumbs() {
      const breadcrumbs = JSON.parse(localStorage.getItem('breadcrumbs') || '[]');
      const matched = this.$route.matched.filter((route) => route.meta.title);
      const index = breadcrumbs.findIndex((item) => item.link === this.$route.path);
      if (index !== -1) {
        breadcrumbs.splice(index + 1);
      } else {
        breadcrumbs.push({
          label: matched[matched.length - 1].meta.title,
          link: this.$route.path,
        });
      }
      localStorage.setItem('breadcrumbs', JSON.stringify(breadcrumbs));
      this.breadcrumbs = breadcrumbs;
    },
  },
};
</script>

在 getBreadcrumbs 方法中，首先获取 localStorage 中保存的面包屑信息，然后使用 $route.matched 获取到当前路由的信息，筛选出有自定义标题的路由，并根据当前路由的 path 属性判断是否需要更新面包屑信息。

最后，将更新后的数据重新存储到 localStorage 中，并更新面包屑组件的数据。

3. 使用面包屑组件

在需要使用面包屑组件的页面中，将组件直接引入即可。代码示例：

<template>
  <div>
    <Breadcrumbs />
    <div class="container">页面内容</div>
  </div>
</template>

<script>
import Breadcrumbs from '@/components/Breadcrumbs';

export default {
  name: 'HomePage',
  components: {
    Breadcrumbs,
  },
};
</script>

示例说明

以下是两个示例，演示了如何使用 localStorage 方式记录面包屑信息。

示例 1

假设我们有一个由分类页、商品页、购物车页和订单页组成的商品商城应用，其中购物车页和订单页需要登录才能访问。我们需要使用面包屑组件来展示用户的访问路径。

假设用户打开网站后，首先进入分类页，再从分类页进入商品页，然后添加商品到购物车，最后去结算下单。此时用户的路径为：

分类页 -> 商品页 -> 购物车页 -> 订单页

用户在订单页下单后，重新回到首页，再从首页进入分类页进行下一次购物。此时，在刷新页面之前，用户可以使用面包屑组件回到购物车或订单页。

示例 2

假设一个新闻站点，包括首页、栏目页、文章页等。如果用户在文章页按浏览器的历史回退按钮返回上一页，会回到栏目页，因为这是浏览器级别的历史记录。如果使用 localStorage 记录访问记录，则可以帮助用户回退时回到上一个具体的文章页。