Inflearn Community Q&A
asked
this.$router params 방식 질문
Resolved
Written on
·
761
·
Edited
0
안녕하세요. 잘 안되는 부분이 있어서 질문하게 되었습니다. 현재 params로 넘길 시 id가 undefind라고 뜨고 query방식으로 넘길 시에는 데이터가 잘 넘어가는데 이유를 모르겠습니다..
github에 있는 코드를 그대로 붙여봐도 똑같아서 질문드립니다 ㅠ
params 방식
ListToDetailView.vue
console.log(customerId)
this.$router.push({ name: 'DetailView', params: { id: customerId } })DetailView.vue
console.log(this.$route)
this.id = this.$route.params.id
console.log(this.id)- index.js에서 router 등록
{
path: '/template/p3/detail',
name: 'DetailView',
component: () =>
import(
/* webpackChunkName: "template", webpackPrefetch:true */ '../views/11_template/p3/DetailView.vue'
)
} 
현재 log찍었을 때 router params에 id가 안들어있어서 goToDetail부분이 이상하다고 생각이드는데 혹시 몰라서 github에 있는 것을 그대로 붙여 쓰는데도 결과는 똑같더라고요 ㅠ 현재 customerId는 값이 들어오고있어요.
goToDetail(customerId) {
// this.$router.push({
// path: '/template/p3/detail',
// query: { id: customerId }
// })
console.log(customerId)
this.$router.push({ name: 'DetailView', params: { id: customerId } })
// http://localhost:8080/template/p3/detail
},그리고 index.js는 github에 있는 파일과 코드 동일합니다.
query 방식
ListToDetailView.vue
this.$router.push({
path: '/template/p3/detail',
query: { id: customerId }
})DetailView.vue
console.log(this.$route.query.id)
this.id = this.$route.query.id
DetailView에서 EditView로 params로 넘길때도 똑같은 상황입니다 ㅠ
라우터에 :id 를 쓰면 되긴 하는데
http://localhost:8080/template/p3/detail이런 형식이 안되다보니..
Answer 2
0
일단 깃허브에 올라간 소스코드를 그대로 실행하면 정상적으로 오류 없이 실행이 됩니다. 깃허브 전체 코드 내려 받고, project 폴더에서 npm install --force 로 패키지 모듈 설치한 후 실행해 보면 params 방식이 정상적으로 되는 것을 확인할 수 있습니다.
얄라차개발자님이 안되는 이유를 파악하려면 조금 더 많은 정보가 필요합니다.
현재 package.json 내용을 알려주시면 제가 파악하는데 도움이 될것 같습니다.
0
안녕하세요.
https://router.vuejs.org/guide/essentials/navigation.html
공식 문서에 나와 있는 것 처럼 params 가 되어야 하는데요.
제가 조금 더 확인해 본 후 답변 드리겠습니다.
일단 query 방식으로 진행 부탁드립니다
안녕하세요 router 4 부터는 router 부터는 아래와 같이 path에 params로 던질 파라미터를 반드시 정의해야 하는 것으로 변경이 되었네요. 이렇게 사용할 수 밖에 없습니다.
{
path: '/template/p3/detail/:id',
name: 'DetailView',
component: () =>
import(
/* webpackChunkName: "template", webpackPrefetch:true */ '../views/11_template/p3/DetailView.vue'
)
}
선생님~ 그러면 :id를 사용하면 그 강의때 말씀하신 url이 http://localhost:8080/template/p3/detail
이렇게 나오지 않고 id가 어떤건지 보여서 나오게 되면 query방식이나 params 방식 둘다 차이가 없는거져?
제가 강의를 들을때 생각했던거는 params방식과 query방식 url이 다르게 나온다고 생각했거든여...
선생님~ package.json 첨부합니다~