인프런 커뮤니티 질문&답변

narrpro님의 프로필 이미지

작성한 질문수

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

공통 컴포넌트 구현(4) - template 속성과 v-if 디렉티브 활용 2

$router $route

20.04.13 16:47 작성

·

759

2

$router 는 이해가 되는데..

$route 이것은 어디에서 설정되었는지요..

그리고 하나 더 궁금한 것이 있는데...  다른 vue 연습때문에

router/index.js  path가  너무 많아서 

store 모듈처럼   여러 파일로 쪼개고 싶은데

구글링 해보면.... 예제처럼 하면 에러가 나던데..ㅠ.ㅠ

그것도 좀  구현 사례나 github 예제좀 알려주세요...

강의 고맙습니다.....  

답변 5

2

narrpro님의 프로필 이미지
narrpro
질문자

2020. 04. 14. 20:34

고맙습니다.  작성해보고 ... 다시 말씀올리겠습니다.

4월 27일 6주 강의도 듣고 싶은데... 서울에서 공주 막차가 11시라서....어렵네요...ㅠ.ㅠ..ㅠ.

2

장기효(캡틴판교)님의 프로필 이미지

2020. 04. 14. 18:18

안녕하세요 narrpro님, 질문하신 내용 답변 드릴게요 :)

1. $route는 어디에서 설정 되었는가?

main.js 파일 보시면 라우터 인스턴스를 생성해서 뷰 인스턴스에 연결하셨을 겁니다. 그렇기 때문에 각 컴포넌트에서 this.$route가 접근 가능합니다 :)

2. routes 배열의 모듈화?

routes 배열에 라우터 정보가 너무 많아 관리가 어려울 때는 배열을 여러 개로 쪼개서 하나로 합치면 됩니다. 이 부분은 Vue.js에서 따로 지원하는 기능은 아니구요. ES6 Modules 문법을 활용하시면 해결 가능합니다, 아래에 예시 코드 적어드릴게요..! :)

// path1.js
export default [
  { path: '/login', component: Login }
]

// path2.js
export default [
  { path: '/product', component: Product }
]

// router/index.js
import Path1 from './path1.js';
import Path2 from './path2.js';

new VueRouter({
  routes: [...Path1, ...Path2, { path: '/sth', component: What }]
})

1

narrpro님의 프로필 이미지
narrpro
질문자

2020. 04. 15. 21:56

라우터  파일 두개로 분리했습니다... 고맙습니다...  여러 모로  도움많이 받아 고맙습니다. 초보에게 많은 도움이 되네요.

나중에 기회가 되면 꼭 커피한잔 사드리고 싶습니다..^^

1

장기효(캡틴판교)님의 프로필 이미지

2020. 04. 15. 18:07

앗 공주에 사시는 군요.. 평일에는 보통 강의 시간이 퇴근 후라 늦게 끝나는 것 같아요.. ㅜㅜ 이후에 기회되서 오프라인 강의에서 뵐 수 있으면 좋겠습니다 :)

0

Won Ders님의 프로필 이미지

2023. 04. 11. 10:15

제 main.js에는

 


import router from './router'
createApp(App).use(store).use(router).mount('#app')

이렇게 되어 있는데요,

 

사용할 땐 $router가 아닌, $route여야 읽히는데 그 이유가 있나요?

const name = this.$route.name; //읽음
const name = this.$router.name; name= '';

 

Vue3 입니다.

narrpro님의 프로필 이미지

작성한 질문수

질문하기