뷰를 이용해서 라우팅 하기
페이지 라우팅 인터넷 브라우저를 사용할 때,
페이지가 전환되는 과정을 통해 해당 페이지를 탐색할 수 있습니다.
이를 페이지 라우팅이라고 하고, Vue에서는 Vue Router가 이러한 역할을 해줍니다.
뷰 환경
CDN 환경으로 진행합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<!-- Vue.js를 이용해 보아요! CDN을 포함시켜요! -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<!-- Vue Router를 이용해서 라우팅을 진행해 줍니다.-->
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
<!-- script tag안에 JavaScript 코드를 입력합니다-->
<script>
</script>
</body>
</html>
링크를 이용해서 화면 전환하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<!-- Vue.js를 이용해 보아요! CDN을 포함시켜요! -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<!-- Vue Router를 이용해서 라우팅을 진행해 줍니다.-->
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 1. Vue router 사용을 위해 router-view 태그를 입력해 줍니다
to="/경로"는 링크를 누르면 연결될 주소입니다.
-->
<router-link to="/main">main component로 이동</router-link>
<router-link to="/sub">sub component로 이동</router-link>
<!-- router-link를 이용해서 변경되는 내용이 <router-view></router-view> 부분에 나타납니다.-->
<router-view></router-view>
</div>
<!-- script tag안에 JavaScript 코드를 입력합니다-->
<script>
// 2. main component와 sub component라는 이름으로 component를 생성해 줄게요
let mainComponent = {
template: "<div>main component</div>",
};
let subComponent = {
template: "<div>sub component</div>",
};
// 3. 어떤 경로를 통해 main component와 sub component를 보여줄지 설정해 줍니다.
// 경로들은 배열 안에 넣어 줍니다.
// 각각의 경로는 객체로 표현합니다.
let routes = [ // routes(경로들)는 여러 경로가 올 수 있어서 배열로 묶어 줍니다.
{
path: "/main",
component: mainComponent, // 각각의 component는 객체({})로 표현합니다.
},
{
path: "/sub",
component: subComponent,
},
];
// 4. 설정된 경로 정보를 이용해서 VueRouter객체를 생성합니다.
// VueRouter객체는 Vue-Router에서 라우팅을 위해 제공되는 객체 입니다.
let router = new VueRouter({
routes: routes,
});
new Vue({
router,
}).$mount("#app");
// Vue객체의 안에 어떤 태그를 연결시켜줄지를 mount를 이용해서 나타내 주었습니다.
// 밑에 있는 el:"#app"을 이용한 코드와 같은 동작을 합니다.
// new Vue({
// // el: "#app",
// router,
// })
</script>
</body>
</html>