반응형
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
바르게
다음과 같이 해 볼 수 있다.postId
URL 매개 변수가 아니라 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>
반응형
'Programing' 카테고리의 다른 글
vuetify의 중앙 부동 버튼 (0) | 2022.05.03 |
---|---|
재해석_캐스트 캐스팅 비용 (0) | 2022.05.03 |
Bootstrap-Vue 페이지 지정이 자동으로 재설정되지 않도록 하는 방법 (0) | 2022.05.03 |
vuex 저장소 형식에서 개체 속성을 다이너믹하게 설정하는 방법(유형 안전 유지 중) (0) | 2022.05.03 |
vuex 입력을 편집하기 위해 vuex 개체를 바인딩하는 깨끗한 방법 (0) | 2022.05.03 |