Vue货币切换器@click传reload=true不生效，无法自动重载页面怎么办

核心修改逻辑 #

问题有两个核心诱因：

• setCurrency方法没有接收你点击时传入的重载标识参数
• 直接调用window相关API会在服务端渲染阶段（created钩子会在服务端执行）触发未定义报错

按以下步骤修改即可：

1. 调整setCurrency方法逻辑 #

给方法增加可选重载参数，同时增加客户端环境判断，避免服务端执行时报错：

methods: {
  setCurrency(newcurrency, reload = false) {
    this.$cookies.set(`usercurrency`, newcurrency, {
      path: '/',
      maxAge: 60 * 60 * 24 * 7
    })
    // 仅需要重载且是客户端环境时执行刷新
    if (reload && typeof window !== 'undefined') {
      // 两种刷新方式二选一即可
      window.location.reload()
      // window.location.href = '/'
    }
  }
}

2. 简化点击事件的参数传递 #

直接传入布尔值true标识需要重载即可，不需要额外定义变量：

<b-dropdown-item v-for="(item, index) in currencies" :key="index" has-link aria-role="menuitem">
  <a class="no-underline" @click="setCurrency(item.iso, true)">
    <span class="text-pink-600 font-bold">{{item.fullname}} ({{item.iso}})</span>
  </a>
</b-dropdown-item>

扩展可选优化 #

如果你是单页应用不需要整页重载，可以在设置完cookie后更新当前组件的currency响应式变量，配合Vue的响应式能力直接更新导航栏显示，无需刷新页面。

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