Vue路由器缺少参数答案

【问题标题】：Vue router missing paramsVue路由器缺少参数
【发布时间】：2019-12-14 15:44:21
【问题描述】：

我正在尝试使用路由器链接将参数传递给页面。问题是我无法访问玩家页面中的参数 playerId。我已经按照vue router site 中的示例进行了操作。下面是我的代码。

Route.js

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

路由器链接标签

<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页面钩子

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

控制台日志

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

【问题讨论】：

标签： javascript vue.js vuejs2 vue-router

【解决方案1】：

当您使用path 时，您的params 将等于您的slug 在您的情况下将是"slug: test-data"，您应该使用query。

如果你想通过params，你应该使用name而不是path，就像your link所说的那样。

更新：这个技巧应该适合你：

<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>

然后你可以访问参数playerName & playerId。

【讨论】：

【解决方案2】：

希望这对你有帮助：

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

【讨论】：