Nuxt & Vue - Element UI 在浏览器后退按钮事件上持久化活动菜单项



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

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

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

我在我的实际项目中使用带有Element UI的Nuxt/Vue。我认为在路由器上使用中间件在这里是合适的,只需在路由更改时在菜单上设置"默认活动"道具,但我是 Nuxt 的新手,想在我把一些东西拍在一起之前获得一些专业输入,这可能是不好的做法。

任何帮助将不胜感激。如果有什么需要澄清的,请告诉我,这是我第一次来这里。

提前感谢!

事实证明,我能够通过一些实验来解决它,而且非常简单。

  1. 默认活动道具设置为$route.path
  2. 将项的索引设置为其各自的路径

这就是对我有用的,希望它在未来对某人有所帮助

在 nuxt.config.js 文件中添加以下内容:

router: {
linkExactActiveClass: 'active'
}

默认情况下,Nuxt 不会对活动链接使用活动类。

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

最新更新