在页面级别更改 css class

Question

此代码在组件级别工作，但是当使用 nuxt-child 和 nuxt-link 代替按钮时，它会更改页面，但颜色保持不变。您知道如何解决这个问题吗？

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

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

<nuxt-child />

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;
    },

Answer 1

试一试：

<button @click="setSelectedTab('main-page'); $router.push({path:'/head'})" :class="headButtonMode"> 
</button>

在页面级别更改 css class

Changing css class at page level

vue.js

nuxt.js