web-dev-qa-db-ja.com

VueJS |コンポーネントでルーターパラメーターにアクセスする方法

私のパラメータ：idにEntryコンポーネントでアクセスしようとしました。小道具で試しましたが、うまくいきません。何か案が？何も見つかりません。

export default new Router({
    routes: [{
        path: '/entry/:id',
        name: 'Entry',
        component: Entry
    }]
})

ありがとうございました

vue.jsvuejs2vue-router
10
bonblow

焼 'の答えは正しいですが、私はドキュメントが「小道具を使用してルーターを切り離す」と呼ぶ方法を使用する傾向があります。

これは、props：trueオプションをルートに追加し、コンポーネントでプロパティを定義することで実現できます。

したがって、ルートには次のものがあります。

export default new Router({
     routes: [{
          path: '/entry/:id',
          name: 'Entry',
          component: Entry,
          props: true
     }]
})

次に、コンポーネントに支柱を追加します。

Vue.component('Entry', {
       template: '<div>ID: {{ id}}</div>',
       props:['id']
})

これはすべてドキュメントに記載されています： ルートコンポーネントへの小道具の受け渡し

16
Russell Shingleton

単に$route.params.idまたはthis.$route.params.idを使用する必要があります。

続きを読む： https://router.vuejs.org/guide/essentials/dynamic-matching.html

小道具の使用を検討する必要があります： https://router.vuejs.org/en/essentials/passing-props.html

14
soju

コンポーネントで使用できます

this.$route.params.id
9
mohammad nazari

HTMLで<div>{{$route.params.id}}</div>

スクリプト内でthis.$route.params.id

2
siva hari
<template>
    <div>
      <p>{{id}}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                id:this.$route.params.id
            }
        },
    }
</script>
1
Bhavik Tarpara