收藏功能vue3+antd

首先，你需要在你的项目中安装Ant Design Vue和Vue Router。然后，你可以创建一个收藏页面和一个收藏按钮组件。

在收藏按钮组件中，你需要添加一个点击事件来将当前页面添加到收藏夹中。你可以使用localStorage来存储收藏的页面。

在收藏页面中，你可以从localStorage中获取所有收藏的页面并将它们显示在页面上。你可以使用Ant Design Vue的Card组件来显示每个收藏的页面。

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

收藏按钮组件：

<template>
  <a-button type="primary" @click="addToFavorites">Add to favorites</a-button>
</template>

<script>
export default {
  methods: {
    addToFavorites() {
      const currentUrl = window.location.href;
      let favorites = JSON.parse(localStorage.getItem('favorites')) || [];
      if (!favorites.includes(currentUrl)) {
        favorites.push(currentUrl);
        localStorage.setItem('favorites', JSON.stringify(favorites));
      }
    }
  }
};
</script>

收藏页面：

<template>
  <div>
    <a-card v-for="(url, index) in favorites" :key="index">
      <a href="url">{{ url }}</a>
    </a-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      favorites: []
    };
  },
  mounted() {
    const storedFavorites = localStorage.getItem('favorites');
    if (storedFavorites) {
      this.favorites = JSON.parse(storedFavorites);
    }
  }
};
</script>

在你的路由器中，你需要创建一个指向收藏页面的路由：

import Favorites from './components/Favorites.vue';

const routes = [
  { path: '/favorites', component: Favorites }
];

现在，你可以在你的应用程序中使用收藏按钮组件，并在收藏页面中查看和管理收藏的页面。