CODEWITHSUNDEEP
javascriptvue.jsparametersroutesurl-parameters
Simon Suh
Simon Suh

Reputation: 10892

How do I prevent my $router params from disappearing once I go to the $router url destination in Vue.js?

When I go to the destination component section (snippet of code copy and pasted below) the gameID parameter shows in the browser for half a second and then disappears, while the game_name parameter is permanently visible. I'm not sure how to make the gameID parameter persist so that I can permanently show it in the browser as well.

my router/index.js file

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

component I'm using the $router.push command in (under 'methods:' section)

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

}

router linke destination component template section

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

Upvotes: 1

Views: 818

Answers (1)

codegames
codegames

Reputation: 1921

because game_name is in your path '/StreamersForGame/:game_name' but gameID is not.

so you have to add it to your path or you can pass it with query:

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

and you can access it like this:

$route.query.gameID

Upvotes: 2

Related Questions