Vue路由器缺少参数

Question

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: {}

Answer 1

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 .

Answer 2

May this will help for you :

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