Nuxt页面层级修改CSS类时nuxt-link跳转后样式不更新如何修复

问题原因 #

• nuxt-link是Vue封装的自定义组件，直接绑定@click默认监听的是组件自定义事件，而非原生DOM点击事件，你写的setSelectedTab方法实际上根本没有触发，selectedTab一直停留在初始值，所以按钮样式不会变化。
• 如果你当前这段代码写在页面组件而非全局布局组件中，路由跳转时当前页面组件会被销毁重建，存储在data中的selectedTab会重置为初始值，就算点击事件触发也无法保留状态。

修复方案 #

方案一（推荐）：使用nuxt-link自带激活类 #

完全不需要自己维护选中状态，nuxt-link会自动给匹配当前路由的链接添加激活类，直接绑定样式即可：

<!-- 精确匹配路由时自动加flat类，不需要额外的JS逻辑 -->
<nuxt-link to="/head" class="head" exact-active-class="flat">
</nuxt-link>

<nuxt-link to="/" class="main" exact-active-class="flat">
</nuxt-link>

<nuxt-child />

如果是模糊匹配路由可以用active-class代替exact-active-class。

方案二：保留自定义状态管理的修改方法 #

如果确实需要自己维护选中状态，按以下两点修改：

1. 把这段逻辑迁移到layouts目录下的布局组件中，布局组件在路由跳转时不会被销毁，状态可以正常保留
2. 给click事件添加.native修饰符，监听原生点击事件：

<nuxt-link to="/head" :class="headButtonMode" @click.native="setSelectedTab('head-page')">
</nuxt-link>

<nuxt-link to="/" :class="mainButtonMode" @click.native="setSelectedTab('main-page')">
</nuxt-link>

<nuxt-child />

<script>
export default {
  data() {
    return {
      selectedTab: "main-page",
    };
  },
  computed: {
    headButtonMode() {
      return this.selectedTab === "head-page" ? "head flat" : "head";
    },
    mainButtonMode() {
      return this.selectedTab === "main-page" ? "main flat" : "main";
    },
  },
  methods: {
    setSelectedTab(tab) {
      this.selectedTab = tab;
    }, 
  }
}
</script>

如果需要页面刷新后依然保留选中状态，可以把selectedTab存储到Vuex或者localStorage中。

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