转到Vue.js中的$ router url目标后，如何防止$ router参数消失？

问题描述

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

我的router / 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>

解决方法

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

因此您必须将其添加到路径中，或者可以通过查询传递它：

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

，您可以像这样访问它：

$route.query.gameID