Vue Router 는 Vue.js의 공식 라우터 입니다.
페이지를 서버에 요청하는 것이 아니라 해당 페이지를 받아 놓고 갱신 하는 SPA(Single Page Application) 방식으로 구동 됩니다.
1) 설치 및 설정
https://eehnuyh.tistory.com/8 환경 설정을 Manually select features으로 진행 했을시 설치 항목은 넘어가도 됩니다.
1. PS D:\831228 EEH\EEH\EX\VUE\exui> npm i -save vue-router
2. 폴더 및 router파일 생성 (index.ts or index.js)
3. main.ts ,main.js 에 라우터 사용 선언
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
createApp(App).use(store).use(router).mount('#app');
2) src/router/index.ts (router 기본 구조)
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import HomeView from '../views/HomeView.vue';
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
component: () =>
import( '../views/AboutView.vue'),
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
routes 파라미터 설명
path : 사이트URL 경로
name : Component 이름
component : Vue Compoent (화면)
component: HomeView 사이트를 방문했을때 모든 컴포넌트를 가지고 옵니다.
component: () => import( '../views/AboutView.vue') 해당 경로에 접근했을 때 가지고 옵니다.
해시 모드 VS 히스토리 모드
1. 해시 모드
URL앞에 해시 문자(#)를 사용합니다.URL 섹션이 서버로 전송되지 않고 SPA Page만 이동 하기때문에 서버에 특별한 처리를 할필요없다(F5 눌렀을때 화면 표시됨)
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
const router = createRouter({
history: createWebHashHistory(),
routes,
});
2. 히스토리 모드(추천)
일반 적인 URL로 표시됩니다. 하지만 F5 로 하면을 리로딩 할경우 404오류 발생 하여 서버에 404 에러 발생시 경로를 추가 해야 합니다.
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes,
});
3) 사용하기
<template>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view />
</template>
router-link : 기본적으로 <a> 태그를 사용 하여 페이지를 이동 하지만 그러면 새로고침이 발생 하여 문제가 되지만
router-link를 사용하여 화면 갱신없이 바로 페이지를 이동 하게 합니다.(클릭 이벤틀 차단합니다)
router-view : router-link에 제공되는 component를 화면에 렌더링 해줍니다.
4) query , params
router/index.ts 설정
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import HomeView from '../views/HomeView.vue';
import ParamsView from '../views/ParamsView.vue';
import QueryView from '../views/QueryView.vue';
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue'),
},
{
path: '/param/:name',
name: 'param',
component: ParamsView,
props: true,
},
{
path: '/query',
name: 'query',
component: QueryView,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
//
export default router;
router-link 설정
<router-link :to="{ name: 'param', params: { name: 'testParam' } }" >Parmas</router-link > |
<router-link :to="{ name: 'query', query: { name: 'testQuery' } }" >Query</router-link>
화면
<template> <div>Params:{{ route.params.name }}</div>
</template>
<script lang="ts" setup>
import { useRoute } from 'vue-router';
const route = useRoute();
</script>
<template> <div>Params:{{ route.query.name }}</div>
</template>
<script lang="ts" setup>
import { useRoute } from 'vue-router';
const route = useRoute();
</script>
5) Named View
import NamedBodyView from '../views/NamedBodyView.vue';
import NamedHeaderView from '../views/NamedHeaderView.vue';
import NamedFooterView from '../views/NamedFooterView.vue';
{
path: '/names',
name: 'names',
components: {
default: NamedBodyView,
header: NamedHeaderView,
footer: NamedFooterView,
},
},
==========================================================
<router-view name="header" />
<router-view />
<router-view name="footer" />
6) 중첩
import ItemFirst from '../views/ItemFirst.vue';
import ItemSecond from '../views/ItemSecond.vue';
import ItemThird from '../views/ItemThird.vue';
{
path: '/first',
name: 'first',
component: ItemFirst,
children: [
{
path: '/first/second',
component: ItemSecond,
children: [{ path: '/first/second/third', component: ItemThird }],
},
],
},
==========================================================
<router-link to="/first">중첩1</router-link> |
<router-link to="/first/second">중첩2</router-link> |
<router-link to="/first/second/third">중첩3</router-link> |
==========================================================
<template>
<div style="width: 500px; height: 500px; background-color: gray">
first
<router-view></router-view>
</div>
</template>
<template>
<div style="width: 400px; height: 400px; background-color: blue">
Second
<router-view></router-view>
</div>
</template>
<template>
<div style="width: 300px; height: 300px; background-color: white">
Third
<router-view></router-view>
</div>
</template>
감사합니다.
댓글