$router $route

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

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

안녕하세요 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 }]
})

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

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

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

제 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 입니다.