728x90
뷰 라우터
<script src="[http://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>;
선행 개념
- 라우팅
- 웹 페이지 간의 이동 방법을 뜻한다.
- 라우팅은 현대 웹 앱 형태중 하나인 "싱글 페이지 애플리케이션" 에서 주로 사용한다.
- 장점
- 화면간의 전환이 매끄럽다.
- 애플리케이션의 사용자 경험을 향상 시킬수 있다.
- 화면 깜박거림이 없다
"싱글 페이지 애플리케이션" : 페이지를 이동할 떄마다 서버에 웹페이지를 요청하여 새로 갱신 하는것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동시에 클라이언트의 라우팅을 이용하여 화면을 갱산하는 패턴을 적용한 애플리케이션
- 뷰 라우터
- 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리
- 뷰 특수 태그와 기능
| 태그 | 설명 |
|---|---|
| 페이지 이동태그. 화면에서는 로 표시 되며 클릭하면 to에 이정한 URL로 이동합니다. | |
| 페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역입니다. |
ex)
...
<div id="app">
<h1>뷰 라우터 예시</h1>
<p>
<!-- 화면에서 a링크와 같이 사용된다. -->
<router-link to="/main">Main 컴포넌트로 이동</router-link>
<router-link to="/login">Login 컴포넌트로 이동</router-link>
</p>
<!-- 갱신된 url 화면을 보여준다. -->
<router-view></router-view>
</div>
...
<!-- router cdn 추가 -->
<script src="http://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script>
// main, login 페이지 정의
var Main = { template: "<div>main</div>" };
var Login = { template: "<div>Login</div>" };
// 각 url 에 맞는 컴포넌트 연결
var routes = [
{ path: "/main", component: Main },
{ path: "/login", compoent: Login },
];
// 라우터 선언
// tip : 뷰 라우터의 기본 URL형식은 해시값을 사용합니다. 만약 index.html/login과 같이 해시값을 없애고 싶으면 mode:history를 사용하면됩니다.
var router = new VueRouter({
// mode: 'history',
routes,
});
// 뷰 인스턴스에 라우터 추가
var app = new Vue({
router,
}).$mount("#app");
</script>네스티드 라우터 (Nested Router)
라우터 페이지를 이동할때 최소 2개 이상의 컴포넌트를 화면에 나타낼수있다.
네스티드라는 단어에서 추측할 수 있듯이 상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조 입니다.
네스티드 라우터를 사용하면 URL에 따라서 컴포넌트의 하위 컴포넌트가 다르게 표시됩니다.
ex)
<body>
<div id="app">
<!-- User 컴포넌트가 뿌려질 영역 -->
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script src="http://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script>
// 컴포넌트 내용 정의
var User = {
// 하위 컴포넌트가 뿌려질 영역
template: "<div>USER Component <router-view></router-view></div>",
};
var UserProfile = { template: "<p>User Profile Component</p>" };
var UserPost = { template: "<p>User Post Component</p>" };
// 네스티드 라우팅 정의
var routes = [
{
path: "/user",
component: User,
children: [
{
path: "posts",
component: UserPost,
},
{
path: "profile",
component: UserProfile,
},
],
},
];
// 뷰 라우팅 정의
var router = new VueRouter({
routes,
});
// 뷰 인스턴스에 라우터 추가
var app = new Vue({
router,
}).$mount("#app");
</script>
</body>네임드 뷰
특정 페이지로 이동했을대 여러개의 컴포넌트를 동시에 표시 하는 라우팅 방식.
앞에 다룬 네스티드 라우터는 상위 컴포넌트가 하위 컴포넌트를 포함 하는 형식 이지만
네임드 뷰는 같은 레벨에서 여러개의 컴포넌트를 한번에 표시힌다.
ex)
<body>
<div id="app">
<!-- 라우팅 영역 정의 -->
<router-view name="header"></router-view>
<!-- name이 없는 경우는 디폴트 -->
<router-view></router-view>
<router-view name="footer"></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script src="http://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script>
// 컴포넌트 정의
var Body = { template: "<div>This is Body</div>" };
var Header = { template: "<div>This is Header</div>" };
var Footer = { template: "<div>This is Footer</div>" };
var router = new VueRouter({
routes: [
{
path: "/",
components: {
// router-view의 name에 컴포넌트 연결
default: Body,
header: Header,
footer: Footer,
},
},
],
});
var app = new Vue({
router,
}).$mount("#app");
</script>
</body>728x90
'FrontEnd > Vue' 카테고리의 다른 글
| Vue.js Module (0) | 2023.04.15 |
|---|---|
| Vue.js 프로젝트 생성 (0) | 2023.04.15 |
| [Vue.js] 컴포넌트 등록 (0) | 2023.04.15 |
| Vue.js란? (0) | 2023.04.15 |
| Vue.js + spring 프로젝트 생성 (0) | 2023.04.15 |