Programing

Vue-roouter 및 Vuex와 함께 작동하도록 경로 매개 변수를 가져오는 방법

c10106 2022. 5. 3. 21:34
반응형

Vue-roouter 및 Vuex와 함께 작동하도록 경로 매개 변수를 가져오는 방법

컴포넌트의 데이터를 $route.params.post으로 전달하려고 하는데, 어딘가에서 고장이 나고 있고 어떻게 작동시켜야 할지 잘 모르겠어.

내 구성 요소에서 사용 중인router-link경로 파일의 특정 경로로 이동하지만 지정된 구성 요소로 라우팅되지 않음.

// Component.vue

<router-link :to="{ path: 'replies', params: { post: postId }}">
    <div class="button is-light is-small has-replies" @click=" postId = thread.no ">Replies</div> 
    //clicking replies will push the thread number to data and load it into the params
</router-link>

export default {
    data () {
        return {
            postId: null
        }
    }
}

// ./routes/index.js

import Replies from '../components/Replies'

routes: [
    { path: '/', component: Frontpage },
    { path: '/replies/:post', component: Replies }
]

버튼을 클릭하면 다음과 같은 경로로 응답 구성 요소가 열려야 함/replies/#그냥 빈 페이지를 로드하고 컴포넌트를 완전히 무시하는 거야가져오는 중vuex-router-sync내 생각에main.js하지만 그게 문제인지 아닌지는 모르겠지만, 내가 그걸 사용하고 있는지 완전히 확신할 수는 없기 때문에 그럴지도 모른다는 것을 잘 알고 있다.vuex-router-sync바르게

다음과 같이 해 볼 수 있다.postIdURL 매개 변수가 아니라 URL 자체의 일부:

<router-link :to="'replies/'+ postId'">
    <div class="button is-light is-small has-replies" @click=" postId = thread.no ">Replies</div> 
    //clicking replies will push the thread number to data and load it into the params
</router-link>

참조URL: https://stackoverflow.com/questions/40698533/how-to-get-route-params-to-work-with-vue-router-and-vuex

반응형