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>