뷰에서는 라우터를 통해 뷰 파일과 url 을 연결해주는 기능을 제공한다.
뷰 예제에서는 보통 App.vue에 직접 라우터 경로를 임포트 하고, 해당 라우터 객체를 뷰인스턴스의 변수로 사용했다. 아래의 코드처뤔.
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <!--라우터 관련 파일 임포트-->
<script>
var rt = new VueRouter({ // 라우터 인스턴스 생성 후 변수에 담아줌
});
new Vue({
el: '#app' ,
router : rt // 뷰 인스턴스에 라우터 인스턴스 넣어줌
});
</script>
</body>
하지만, 대형 프로젝트에서는 이렇게 하지 않고 index.js라는 파일을 통해 라우터를 한꺼번에 관리한다.
$mkdir router
$cd router
$vi index.js를 통해 router라는 디렉토리를 하나 만들고, index.js라는 파일을 생성해주었다.
프로젝트 구조는 다음과 같아졌다.
- src
- components
- router
- index.js
- App.vue
main.js에서 우선 설정을 해준다.
// 1. main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router' //라우터 임포트
import vuetify from './plugins/vuetify'
new Vue({
el: '#app',
router, // 뷰 인스턴스 초기화값에 router 변수 넣어줌.
vuetify,
render: h => h(App)
})
그리고 index.js파일에 라우터를 임포트 해주고, Vue.use를 통해 이 Application에서는 이 파일을 라우터를 쓸 것이다!라고 선언해주면 된다.
import Vue from 'vue'
import Router from 'vue-router'
// #1. 뷰 객체 가져오기
import EnrolClasses from '../components/EnrolClasses.vue'
import Mmbrship from '../components/Mmbrship.vue'
import UserInfo from '../components/UserInfo.vue'
import Notice from '../components/Notice.vue'
Vue.use(Router)
const createRouter = () => new Router({
mode: 'history',
routes: [
// #2. url 과 객체를 연결해준다.
{
path : '/',
name : 'index',
component : Mmbrship
},
{
path : '/enrolclasses',
name : 'enrolclasses',
component : EnrolClasses
} ,
{
path : '/userInfo',
name : 'userInfo',
component : UserInfo
},
{
path : '/notice' ,
name : 'notice',
component : Notice
}
],
scrollBehavior () {
return { x: 0, y: 0 }
}
})
const router = createRouter()
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
export default router
#1. 뷰 객체 임포트
프로젝트 구조가 index.js 파일을 기준으로 뷰 객체들은 상위 폴더에 있으므로 파일을 임포트해올 때 '../components~' 로 해준다.
cf. 하위 디렉토리에 있는 경우 './~' , 동일 디렉토리에 있는 경우 '/~'
#2. 객체와 url 맵핑
url은 path, 이름은 name, component에는 임포트해온 뷰 객체의 변수 명을 적어주면된다.
name은 다른 뷰 객체에서 라우터를 호출할 때 사용되니 꼭 적자~!
그럼 다른 뷰 객체에서 라우터를 호출 할 때 어떻게 하는지 알아보자
router.push({ path: 'index.js 내 path변수값' })
router.push({ name: 'index.js 내 name변수값', params: { var1: 12345 , list: {list} }})
router.push({ path: 'index.js 내 path변수값', query: { var1: 12345 , list: {list} }})이런 방식으로 사용하면 된다.
'개인 프로젝트 > 예약 시스템 개발하기' 카테고리의 다른 글
| 예약 시스템 개발하기 06. EmbeddedId와 ConverterNotFoundException (0) | 2022.03.12 |
|---|---|
| 예약 시스템 개발하기 05. HttpMediaTypeNotSupportedException (0) | 2022.03.12 |
| 예약 시스템 개발하기 04. JPA 쿼리 메소드와 JPQL , CharacterEncodingFilter (0) | 2022.03.06 |
| 예약 시스템 개발하기 03. axios 통신과 CORS 정책 (0) | 2022.02.02 |
| 예약 시스템 개발하기 01. Vuetify 설치 및 프로젝트 구조 (0) | 2022.01.31 |