一旦我转到 Vue.js 中的 $router url 目的地，如何防止我的 $router 参数消失？

Question

当我转到目标组件部分（代码复制和粘贴的片段）时，gameID 参数在浏览器中显示半秒钟然后消失，而 game_name 参数永久可见。 我不确定如何使 gameID 参数保持不变，以便我也可以在浏览器中永久显示它。

我的路由器/index.js 文件

{
    path: '/StreamersForGame/:game_name',
    name: 'StreamersForGame',
    component: StreamersForGame,
}

组件我在（在“方法：”部分下）使用 $router.push 命令

goToSpecificGameStreamsPage: function (gameID, gameName) {
  this.$router.push({
    name: 'StreamersForGame',
    params: {
      gameID: gameID,
      game_name: gameName,
    }
  });
}

}

路由器链接目的地组件模板部分

<template>
  <div class="hello">
    <h1>Streamers for '{{ $route.params.game_name }}'</h1>
    <h2>GameID: {{ $route.params.gameID }}</h2>
  </div>
</template>

Answer 1

因为 game_name 在您的路径'/StreamersForGame/:game_name'但 gameID 不在。

所以你必须将它添加到你的路径中，或者你可以通过查询传递它：

this.$router.push({
    name: 'StreamersForGame',
    params: {
        game_name: gameName,
    },
    query: {
        gameID: gameID,
    }
});

你可以像这样访问它：

$route.query.gameID