如何为Vue Router的已访问router-link添加visited类？

嘿，这个需求很实用啊！Vue Router 的 router-link 本身并没有内置「已访问」状态的支持，不过咱们可以通过响应式数据 + 路由监听 + 动态类绑定来优雅实现，这也是目前最优的方案了，我给你拆解一下具体步骤：

1. 维护已访问记录的响应式数据 #

首先在组件里定义一个 Set 来存储已访问的文章 ID（用 Set 是因为它自动去重，查找效率比数组高），如果需要刷新页面后记录不丢失，还可以结合 localStorage 做持久化：

export default {
  data() {
    return {
      visitedPosts: new Set()
    }
  },
  mounted() {
    // 页面加载时从 localStorage 恢复已访问记录
    const savedVisited = JSON.parse(localStorage.getItem('visitedPosts')) || []
    this.visitedPosts = new Set(savedVisited)
  }
}

2. 监听路由变化，记录访问行为 #

我们可以用全局路由守卫或者组件内路由守卫来捕获用户进入文章页的动作，把当前文章 ID 加入已访问集合：

全局路由守卫（适合全局复用）

在你的路由配置文件（比如 router/index.js）里添加：

router.afterEach((to) => {
  // 只处理文章详情页的路由
  if (to.name === 'post') {
    const postId = to.params.id
    const visited = JSON.parse(localStorage.getItem('visitedPosts')) || []
    // 避免重复添加
    if (!visited.includes(postId)) {
      visited.push(postId)
      localStorage.setItem('visitedPosts', JSON.stringify(visited))
    }
  }
})

组件内守卫（如果只在当前组件处理）

如果只是单个组件需要这个功能，也可以在组件里用 beforeRouteEnter：

export default {
  // ...其他代码
  beforeRouteEnter(to, from, next) {
    next(vm => {
      const postId = to.params.id
      if (!vm.visitedPosts.has(postId)) {
        vm.visitedPosts.add(postId)
        // 同步到 localStorage
        localStorage.setItem('visitedPosts', JSON.stringify([...vm.visitedPosts]))
      }
    })
  }
}

3. 给 router-link 动态绑定 visited 类 #

最后修改你的 router-link 代码，通过 :class 动态判断是否添加 visited 类——另外注意：你原来的代码里在 router-link 里嵌套了 <a> 标签，其实当 tag="li" 时，router-link 会直接渲染成 <li>，不需要再包 <a>，否则会出现嵌套链接的问题，这里一起优化了：

<router-link 
  v-for="post in posts" 
  :key="post.id" 
  active-class="active" 
  :class="['link', visitedPosts.has(post.id) ? 'visited' : '']" 
  tag="li" 
  :to="{ name: 'post', params: { id: post.id } }"
>
  {{ post.icon }} {{ post.title }}
</router-link>

为什么这是最优方案？ #

• 响应式更新：visitedPosts 是响应式的，当集合变化时，router-link 的类会自动更新
• 高效去重：用 Set 存储 ID，查找和添加操作都是 O(1) 时间复杂度
• 持久化支持：结合 localStorage 实现页面刷新后记录不丢失
• 低侵入性：不需要修改路由核心逻辑，只是通过守卫和数据绑定实现需求

内容的提问来源于stack exchange，提问作者Žilvinas