在 Nuxt JS vuex 中使用 Vue Router 重定向

Posted 2023-02-22

【中文标题】在 Nuxt JS vuex 中使用 Vue Router 重定向

【英文标题】：Redirect using Vue Router in Nuxt JS vuex

【发布时间】：2020-01-11 10:19:19

【问题描述】：

我正在构建一个登录/注册系统作为应用程序的一部分。我正在使用 Firebase 和 Vuex 来处理身份验证和数据库信息。我在 Nuxt JS 中有一些创建用户、登录和注销用户的操作。

我正在尝试在用户成功注册后实现重定向/当他们点击登录时，我的代码是：

export const actions = 

  /*
   * Create a user
   */
  createUser (commit, payload) 
    this.$fireAuth.createUserWithEmailAndPassword(payload.email, payload.password).then(function(firebaseUser) 
      commit('setUser', payload)
    ).catch(function(error) 
      console.log('error logging in' + error)
    );
  ,

  /*
   * Log a user into Beacon
   */
  login (commit, payload) 
    this.$fireAuth.signInWithEmailAndPassword(payload.email, payload.password).then(function(firebaseUser) 
      commit('setUser', payload)
    ).catch(function(error) 
      console.log('error logging in' + error)
    );
  ,

  /*
   * Sign a user out of Beacon
   */
  signOut (commit) 
    this.$fireAuth.signOut().then(() => 
      commit('setUser', null)
    ).catch(err => console.log(error))
  

我在 Vue JS 2.6.10 上使用 Nuxt JS 2.9.2

我有几个模块。

我已尝试使用this.router.push('/') 和window.location.href，但希望保留 SPA 功能。

【问题讨论】：

this.$router.push 或 this.$router.replace 有什么问题？

您遇到了什么问题？你真的不会问任何问题。

【参考方案1】：

你有两种方法可以做到：

$nuxt.$router.push 在行动中 将this.$router.push 作为参数传递给您的操作，并在您需要的地方调用。

希望这会有所帮助。

【讨论】：

只想补充一点，如果您使用外部函数（如突变/动作之外）但仍在同一个 Vuex 文件中，您需要从突变/动作中传递router ，如externalFunction(this.app.router) 否则，您无法正确访问它。

我们可以在actions中访问$nuxt.$router.push？