CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-router
PenAndPapers
PenAndPapers

Reputation: 2108

Vue router missing params

I'm trying to use router link to pass a parameter to a page. The issue is that I'm not able to access the param playerId in the players page. I've followed the example in vue router site. Below are my code.

Route.js

{
      path: '/player/:slug',
      name: 'playerprofile',
      component: () => import(/* webpackChunkName: "playerprofile" */ './views/PlayerProfile.vue'),
      props: true
    }

Router Link Tag

<router-link :to="{path: '/player/'+ player.personName.replace(/ /g, '-').toLowerCase(), params: {slug: player.personName,playerId: player.personId}}">
            <TextH3 class="font-bold flex-1 text-black hover:text-primary">{{ player.personName }}</TextH3>
          </router-link>

Before Route hook in the page

beforeRouteEnter(to, from, next) {
        console.log(to)
        next()
    }

Console Log

fullPath: "/player/test-data"
hash: ""
matched: [{…}]
meta: {}
name: "playerprofile"
params:
  slug: "Test Data"
__proto__: Object
path: "/player/test-data"
query: {}

Upvotes: 0

Views: 1535

Answers (2)

Christian Carrillo
Christian Carrillo

Reputation: 2761

When you use path yours params will be equals to your slug in your case will be "slug: test-data", there you should use query.

If you want pass params you should use name instead of path as your link says.

update: This hack should work for you:

<router-link
  :to="{
    name: 'playerprofile',
    params: {
      slug: player.personName.replace(/ /g, '-').toLowerCase(),
      playerName: player.personName,
      playerId: player.personId
    }
  }"
>
  <TextH3 class="font-bold flex-1 text-black hover:text-primary">
    {{ player.personName }}
  </TextH3>
</router-link>

Then u can access to params playerName & playerId.

Upvotes: 1

Kunvar Singh
Kunvar Singh

Reputation: 1885

May this will help for you : 

created() {
    console.log(this.$route);
    this.slug = this.$router.params.slug;
  },

Upvotes: 0

Related Questions