Nuxt 和 Vue - 浏览器后退按钮事件上的元素 UI 持久活动菜单项

Question

我的问题是，对于给定的单击菜单项，有一个“已选择”状态，该状态只会使该项目变暗以供用户反馈。问题是当按下浏览器后退按钮时活动项目正在重置，而路线仍然正确更改。我整理了一个关于这里发生的事情的快速功能演示：https://codepen.io/soodohcool/pen/xxbambE

/* the codepen is for illustrating the behavior of my issue */

点击菜单项几次，然后按“模拟返回”按钮看看会发生什么。请注意页面标题正确更改，但菜单项上的活动状态消失。

我在实际项目中使用 Nuxt/Vue 和 Element UI。我在考虑在路由器上使用中间件在路由更改时只在菜单上设置“默认活动”道具是合适的，但我是 Nuxt 的新手，想在我拍打一些可能的东西之前获得一些专业意见是不好的做法。

非常感谢任何帮助。如果有什么需要澄清的，请告诉我，这是我第一次来这里。

提前致谢！

Answer 1

事实证明，我通过一些实验就能解决这个问题，而且非常简单。

1. 将 default-active 属性设置为 $route.path
2. 将项目的索引设置为其各自的路径

这对我有用，希望它对未来的人有所帮助

Answer 2

在您的 nuxt.config.js 文件中添加以下内容：

router: {
    linkExactActiveClass: 'active'
}

默认情况下，nuxt 不为活动链接使用活动类。

您还需要使用<nuxt-link> 组件将活动类绑定到活动页面链接 https://nuxtjs.org/api/components-nuxt-link/