#뷰 라우터 인스턴스 생성 및 뷰 인스턴스에 연결
<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>
아래와 같이 vue 인스턴스에 $route 변수가 주입된 걸 확인할 수 있다.
#라우터가 표시되는 영역
<body>
<div id="app">
<router-view></router-view> <!--routes에 정의된 url로 이동시에 component를 뿌려주는 영역 선언-->
</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 LoginComponent = {
template: '<div>Login</div>'
}
var MainComponent = {
template : '<div>Main</div>'
}
var rt = new VueRouter({ // 라우터 인스턴스 생성 후 변수에 담아줌
//속성1 : 페이지의 라우팅 정보 - url 과 페이지에 관한 정보를 배열로 나타냄
routes: [
{
// 페이지의 url 이름
path: '/login' ,
// 해당 url에서 표시될 컴포넌트
component : LoginComponent
},
{
path : '/main' ,
component : MainComponent
}
]
});
new Vue({
el: '#app' ,
router : rt // 뷰 인스턴스에 라우터 인스턴스 넣어줌
});
</script>
</body>라우터 인스턴스에 /login 과 /main url 및 url에 대응하는 컴포넌트 명을 선언해주었다.
만약 해당 url 이 호출 될 경우, <router-view> 태그 영역에 해당 컴포넌트들이 주입이 될 것이다.
해당 소스 실행 결과는 다음과 같다.
1). http://127.0.0.1:5500/playground/router.html#/login url을 호출 한 경우
2). http://127.0.0.1:5500/playground/router.html#/main url을 호출 한 경우
#라우터 링크
아래와 같이 라우터 링크를 추가해주면 <a href="/login"> 이런식으로 이동 링크를 제공해준다.
그리고 해당 url을 클릭하면 저 router-view영역에 데이터가 주입된다.
<div id="app">
<div>
<router-link to="/login">Login</router-link>
<router-link to="/main">main</router-link>
</div>
<router-view></router-view>
</div>
그러면 이렇게 화면에 링크와 html 값들이 조회된다.
해당 포스팅은 인프런의 Vue.js 시작하기 - Age of Vue.js 학습 후 정리한 내용임을 알려드립니다.
'Study > Vue' 카테고리의 다른 글
| Vue.js 시작하기 08. 템플릿 (0) | 2022.01.22 |
|---|---|
| Vue.js 시작하기 07. HTTP 통신 라이브러리 - axios (0) | 2022.01.22 |
| Vue.js 시작하기 05. 컴포넌트 레벨 간의 통신 방법 (0) | 2022.01.19 |
| Vue.js 시작하기 04. 컴포넌트 통신방식 (0) | 2022.01.19 |
| Vue.js 시작하기 03. 컴포넌트 (0) | 2022.01.18 |