vue2项目书签功能实现

实现一个书签功能需要以下步骤：

1. 在项目中安装 `vue-router` 库，用于管理页面路由。
2. 在需要添加书签的页面中，添加一个“添加书签”按钮或者其他触发事件的元素。
3. 在点击“添加书签”按钮时，调用一个函数，将当前页面的路由信息保存到本地存储中，例如使用 `localStorage.setItem()` 方法。
4. 在需要显示书签列表的页面中，读取本地存储中保存的所有书签信息，并将其渲染到页面中，例如使用 `localStorage.getItem()` 方法和 `v-for` 指令。
5. 在书签列表中，添加一个“打开书签”按钮或其他触发事件的元素。
6. 在点击“打开书签”按钮时，调用一个函数，根据书签中保存的路由信息，使用 `router.push()` 方法跳转到对应页面。

下面是一个简单的示例代码：

<template>
  <div>
    <!-- 添加书签按钮 -->
    <button @click="addBookmark">添加书签</button>
    <!-- 书签列表 -->
    <div v-for="(bookmark, index) in bookmarks" :key="index">
      {{ bookmark.title }}
      <button @click="openBookmark(bookmark)">打开书签</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bookmarks: [], // 保存所有书签信息的数组
    };
  },
  methods: {
    addBookmark() {
      const { path, name, meta } = this.$route; // 获取当前页面的路由信息
      const bookmark = { path, name, meta, title: document.title }; // 构建书签对象
      const bookmarks = JSON.parse(localStorage.getItem('bookmarks') || '[]'); // 从本地存储中读取所有书签信息
      bookmarks.push(bookmark); // 添加新的书签信息到数组中
      localStorage.setItem('bookmarks', JSON.stringify(bookmarks)); // 保存所有书签信息到本地存储中
    },
    openBookmark(bookmark) {
      this.$router.push(bookmark); // 跳转到保存的路由信息对应的页面
    },
  },
  mounted() {
    const bookmarks = JSON.parse(localStorage.getItem('bookmarks') || '[]'); // 从本地存储中读取所有书签信息
    this.bookmarks = bookmarks; // 将书签信息保存到组件的 data 中
  },
};
</script>

需要注意的是，保存到本地存储中的书签信息仅仅是路由信息，如果需要保存其他信息，比如页面的滚动位置等，需要自行添加代码实现。