인프런 커뮤니티 질문&답변
작성한 질문수
$router $route
작성
·
770
2
$router 는 이해가 되는데..
$route 이것은 어디에서 설정되었는지요..
그리고 하나 더 궁금한 것이 있는데... 다른 vue 연습때문에
router/index.js path가 너무 많아서
store 모듈처럼 여러 파일로 쪼개고 싶은데
구글링 해보면.... 예제처럼 하면 에러가 나던데..ㅠ.ㅠ
그것도 좀 구현 사례나 github 예제좀 알려주세요...
강의 고맙습니다.....
답변 5
2
2
안녕하세요 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
라우터 파일 두개로 분리했습니다... 고맙습니다... 여러 모로 도움많이 받아 고맙습니다. 초보에게 많은 도움이 되네요.
나중에 기회가 되면 꼭 커피한잔 사드리고 싶습니다..^^
1
앗 공주에 사시는 군요.. 평일에는 보통 강의 시간이 퇴근 후라 늦게 끝나는 것 같아요.. ㅜㅜ 이후에 기회되서 오프라인 강의에서 뵐 수 있으면 좋겠습니다 :)
0
제 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 입니다.