Nuxt 和 Vue - Element UI 在浏览器后退按钮事件上保留活动菜单项
Nuxt & Vue - Element UI Persisting active menu item on browser back button event
我的问题是，对于给定的单击菜单项，有一个 'selected' 状态只是为了用户反馈使该项目变暗。问题是当按下浏览器后退按钮时，活动项目正在重置，而路线仍然正确更改。我整理了一个关于这里发生的事情的快速功能演示：https://codepen.io/soodohcool/pen/xxbambE
/* the codepen is for illustrating the behavior of my issue */
点击菜单项几次，然后按 "simulate back" 按钮看看会发生什么。请注意，页面标题已正确更改，但菜单项上的活动状态消失了。
我在实际项目中使用 Nuxt/Vue 和 Element UI。我在想在路由器上使用中间件在这里是合适的，当路由改变时只在菜单上设置 'default-active' 道具，但我是 Nuxt 的新手并且想在我将一些东西放在一起之前获得一些专业的输入可能是不好的做法。
非常感谢任何帮助。如果有任何需要澄清的地方，请告诉我，这是我第一次来这里。
提前致谢！
在您的 nuxt.config.js 文件中添加以下内容：
router: {
linkExactActiveClass: 'active'
}
nuxt 默认不使用活动的 class 作为活动的 links。
此外，您还需要使用 <nuxt-link> 组件将活动 class 绑定到活动页面 link
https://nuxtjs.org/api/components-nuxt-link/
事实证明，我可以通过一些实验解决它，而且非常简单。
- 将 default-active 属性设置为 $route.path
- 将项目的索引设置为其各自的路径
这对我有用，希望它能帮助将来的人
我的问题是，对于给定的单击菜单项，有一个 'selected' 状态只是为了用户反馈使该项目变暗。问题是当按下浏览器后退按钮时，活动项目正在重置，而路线仍然正确更改。我整理了一个关于这里发生的事情的快速功能演示：https://codepen.io/soodohcool/pen/xxbambE
/* the codepen is for illustrating the behavior of my issue */
点击菜单项几次，然后按 "simulate back" 按钮看看会发生什么。请注意，页面标题已正确更改，但菜单项上的活动状态消失了。
我在实际项目中使用 Nuxt/Vue 和 Element UI。我在想在路由器上使用中间件在这里是合适的，当路由改变时只在菜单上设置 'default-active' 道具，但我是 Nuxt 的新手并且想在我将一些东西放在一起之前获得一些专业的输入可能是不好的做法。
非常感谢任何帮助。如果有任何需要澄清的地方，请告诉我，这是我第一次来这里。
提前致谢！
在您的 nuxt.config.js 文件中添加以下内容：
router: {
linkExactActiveClass: 'active'
}
nuxt 默认不使用活动的 class 作为活动的 links。
此外，您还需要使用 <nuxt-link> 组件将活动 class 绑定到活动页面 link
https://nuxtjs.org/api/components-nuxt-link/
事实证明，我可以通过一些实验解决它，而且非常简单。
- 将 default-active 属性设置为 $route.path
- 将项目的索引设置为其各自的路径
这对我有用，希望它能帮助将来的人