【问题标题】:Redirect using Vue Router in Nuxt JS vuex在 Nuxt JS vuex 中使用 Vue Router 重定向
【发布时间】: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.pushthis.$router.replace 有什么问题?
  • 您遇到了什么问题?你真的不会问任何问题。

标签: javascript firebase vue.js vuex nuxt.js


【解决方案1】:

你有两种方法可以做到:

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

希望这会有所帮助。

【讨论】:

  • 只想补充一点,如果您使用外部函数(如突变/动作之外)但仍在同一个 Vuex 文件中,您需要从突变/动作中传递router ,如externalFunction(this.app.router) 否则,您无法正确访问它。
  • 我们可以在actions中访问$nuxt.$router.push
猜你喜欢
  • 2017-12-18
  • 2020-07-17
  • 2021-03-20
  • 2019-09-09
  • 2019-09-27
  • 2019-10-19
  • 2021-11-15
  • 2023-04-08
  • 2021-01-26
相关资源
最近更新 更多