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