Nuxt.js组件v-if条件变更时不热重载问题求助

看起来你的问题核心是组件选项的语法错误导致响应式系统失效，同时我们可以优化条件判断逻辑让代码更清晰。让我一步步帮你解决：

1. 修复核心语法错误 #

你的<script>部分存在结构错误：methods被错误嵌套在data函数内部，而且return的对象末尾多了一个不必要的逗号，这会导致Vue无法正确解析组件选项，userToken的响应式绑定自然无法正常工作。

正确的组件选项结构应该是data、methods、mounted等同级关系，修改后的<script>开头如下：

export default {
  data () {
    return {
      userToken: '' // 去掉对象末尾的多余逗号
    } // 结束return语句，无额外逗号
  },
  methods: {
    getUserToken() {
      let token = this.$cookies.get('userToken')
      if (token) {
        this.userToken = token
        // 注意：如果在mounted时调用此方法，页面加载就会跳转，可根据需求调整
        // this.$router.push('user_dashboard')
      }
    },
    logout() {
      this.$cookies.remove('userToken')
      this.userToken = '' // 修改响应式变量，触发视图更新
    },
    goToDashboard() {
      this.$router.push('user_dashboard')
    }
  },
  mounted() {
    this.getUserToken()
  }
  // ...其他组件选项
}

2. 优化条件判断（可选但推荐） #

直接使用userToken作为v-if条件虽然可行，但用计算属性封装认证状态会让代码更语义化，也方便后续扩展：

添加计算属性：

computed: {
  isAuthenticated() {
    // 把token转换为布尔值：空字符串→false，有值→true
    return !!this.userToken
  }
}

然后将模板中的v-if="userToken"替换为v-if="isAuthenticated"：

<template slot="end">
  <b-navbar-item tag="div">
    <div class="buttons">
      <a v-if="isAuthenticated" class="button is-primary" style='padding:4px; margin-right:0;'>
        <b-button size="is-normal" type="is-primary" icon-right="close" outlined inverted style="margin-bottom: 0;" @click="logout">
          Logout
        </b-button>
      </a>
      <a v-if="isAuthenticated" class="button is-primary" style='padding:4px; margin-left:0;'>
        <b-button size="is-normal" type="is-success" icon-right="account-circle-outline" style="margin-bottom: 0;" @click="goToDashboard">
          Dashboard
        </b-button>
      </a>
      <a v-else class="button is-primary">
        <b-icon icon="account-circle-outline" size="is-medium">
        </b-icon>
      </a>
    </div>
  </b-navbar-item>
</template>

为什么这样能解决问题？ #

Vue的响应式系统依赖正确的组件选项结构，当methods被错误嵌套时，Vue无法识别该选项，导致userToken的响应式绑定未被初始化——哪怕你修改了userToken的值，视图也不会触发更新。修复语法错误后，userToken作为data中的响应式变量，只要修改它的值，Vue就会自动更新对应的v-if视图。

另外，计算属性isAuthenticated会自动依赖userToken的变化，当userToken改变时，计算属性会重新计算，进而触发视图更新，代码可读性也更强。

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