VueJS | 컴포넌트 내의 라우터 파라미터에 액세스하는 방법

VueJS | 컴포넌트 내의 라우터 파라미터에 액세스하는 방법

Entry 컴포넌트에서 파라미터:id에 액세스하려고 했습니다.소품으로 해봤는데 안 되네.감 잡히는 게 없어요?아무것도 못 찾겠어.

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

감사합니다.

소주의 답은 맞지만, 저는 '소품을 이용해 공유기를 분리한다'는 의사들의 표현 방식을 사용하는 경향이 있습니다.

이를 위해서는 루트에 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']
})

이 모든 내용은 문서 "Passing Proposing Product to Route Components"에서 확인할 수 있습니다.

를 간단하게 사용해 주세요.$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

컴포넌트에서 사용할 수 있습니다.

this.$route.params.id

html로 표시<div>{{$route.params.id}}</div>

스크립트에 포함this.$route.params.id

<template>
    <div>
      <p>{{id}}</p>
    </div>
</template>

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

언급URL : https://stackoverflow.com/questions/48446709/vuejs-how-to-get-access-to-router-parameter-in-my-component