在调用 router.push() 之前加载 Vue 组件

Question

我正在使用 Vue js 和 Firestore 为 2 名玩家开发一款在线游戏。

点击新游戏按钮时；

• 我创建了一个新房间并将其保存在数据库中。
• 我使用 firestore docChanges () 函数检查更改。如果创建了新房间，我会将当前玩家和对手重定向到 Game.vue 页面。

我的代码

Home.vue

import db from "@/firebase/init";
import Navbar from "@/components/Navbar";
export default {
  name: "Home",
  components: {
    Navbar
  },
  data() {
    return {
   
    };
  },

  methods: {

    newGame() {
      this.createGameRoom();
    },
    createGameRoom() {
      let gameNo = Date.now();
      db.collection("game_rooms")
        .add({
          gameNo: gameNo,
        })
        .then(() => {
          this.createGameAndOpponent();
        });
    },

    createGameAndOpponent() {
      db.collection("game_rooms").onSnapshot(snapshot => {
        snapshot.docChanges().forEach(change => {
          if (change.type == "added") {

           console.log("******************************")
           console.log('Current Page Name(Static):Home.vue')
           console.log('Current Page Name(Dynamic):'+this.$route.name)
           console.log("Pushing to game component")
           console.log("******************************")
            this.$router.push("/game");
          }
        });
      });
    },
  }
};

<template>
  <div id="home">
    <Navbar />
    <div class="home container">
      <div class="card">
        <a class="waves-effect waves-light btn-large btn deep-purple darken-1" @click="newGame">
         New Game
        </a>
      </div>
    </div>
  </div>
</template>

Game.vue

export default {
  name: "Game",
  data() {
    return {};
  },
  created() {
    console.log("******************************");
    console.log("Current Page Name(Static):Game.vue");
    console.log("Current Page Name(Dynamic):" + this.$route.name);
    console.log("Game component created");
  },

  methods: {}
};

<template>
  <div id="game">
    <router-link
      :to="{name:'Home'}"
    >Return Home Page</router-link>
  </div>
</template>

Vue 路由器 - index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Game from '../views/Game.vue'
Vue.use(VueRouter)


const routes = [{
    path: '/',
    name: 'Home',
    component: Home,

}, {
    path: '/game',
    name: 'Game',
    component: Game,

}, ]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})


export default router

我正在检查 createGameAndOpponent 函数内部：

如果“game_rooms”发生变化或创建了新游戏，请从在线用户中找到对手并将两个用户重定向到游戏页面。但是这里重定向的时候出错了。页面未重定向并出现以下错误。

但我收到以下错误

未捕获（承诺）
NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "导航到当前位置 ("/game") 是不允许的"

虽然当前页面是Home.vue，但是说当前页面是game.vue，并说“不允许进入'/game'页面”。

我做了以下来了解问题的详细信息。

• 当我点击 Home.vue 中的“New Game”按钮时，在进入 Game 页面之前，我用控制台静态和动态地打印了当前页面的名称。
• 在Game.vue页面中，在created()方法中创建Game.vue组件时，我用控制台静态和动态打印了页面名称。

如图所示，虽然Active页面是Home.vue this.$route.name显示的是游戏页面的名称。

我在 firestore docChanges() 函数中重定向到 game.vue。问题应该在这里。 但我无法解决问题的根源。

我该如何解决这个问题？

注意事项：

• Vue 版本：@vue/cli 4.1.2
• 我在 github 上将 minimal project 共享为 repo。
• 在线最小项目：https://vue-test-game.firebaseapp.com/

Answer 1

在我看来，你似乎有两个问题。

你能确定下面的代码只调用一次吗？你使用一个forEach，可能会被this.$router.push 调用两次。您的日志显示了回调已被调用两次的逻辑。

        snapshot.docChanges().forEach(change => {
      if (change.type == "added") {

       console.log("******************************")
       console.log('Current Page Name(Static):Home.vue')
       console.log('Current Page Name(Dynamic):'+this.$route.name)
       console.log("Pushing to game component")
       console.log("******************************")
        this.$router.push("/game");
      }
    });

如果是这样，您可能不需要 forEach 而是一个简单的 for 和 return，或者在您尝试 break 循环调用时使用带有 return true 的 [].some。

Answer 2

根据您的问题，根据我们的 cmets，问题似乎来自您在以下循环中多次重定向（使用 this.$router.push("/game");）：

createGameAndOpponent() {
  db.collection("game_rooms").onSnapshot(snapshot => {
    snapshot.docChanges().forEach(change => {
      if (change.type == "added") {
        //...
        this.$router.push("/game");
      }
    });
  });
}

您应该在第一次遇到等于added 的change.type 时中断循环。由于docChanges()返回一个数组，你可以这样做：

createGameAndOpponent() {
  db.collection("game_rooms").onSnapshot(snapshot => {
    for (const change of snapshot.docChanges()) {
      if (change.type == "added") {
        this.$router.push("/game");
        break;
      }
    });
  });
}

---

注意以下几点：

1. 由于通过 db.collection("game_rooms").onSnapshot 设置监听器，您应该从 vue.js 的 created 钩子中调用此方法（仅一次）。
2. 另一方面，在getGameUsers() 方法中，由于您只查询一次Firestore 数据库（如果我没记错的话），最好使用get() 方法，它只查询一次数据库。