[Vue3] 다른 페이지로의 이동을 관리하는 라우터 객체와 렌더링을 위한 컴포넌트
라우팅(Routing)이란
웹 애플리케이션에서는 다른 페이지로의 이동과 경로를 관리하는 기술을 말한다.
SPA에서 라우팅은 (브라우저)클라이언트 측에서 수행된다.
javascript가 새 데이터를 동적으로 가져오기 때문에 페이지가 다시 로드되지 않고,
여러 컴포너트를 렌더링하여 여러 페이지를 사용하는 것처럼 보이게 할 뿐이다.
Vue에서 라우팅을 하기 위해 vue-router 라이브러리를 설치해야 한다.
1
npm i vue-router
설치한 라이브러리를 모든 컴포넌트에서 전역적으로 사용하기 위해,
🐝 main.js에 app.use()를 사용해 router를 사용할 것을 선언한다.
🐝 main.js
1
2
3
4
5
6
7
import App from './App.vue'
import { createApp } from 'vue'
import { router } from './router/router'
const app = createApp(App);
app.use(router);
app.mount('#app');
Vue CLI의 내부 동작 및 설정에 따라 🐝 main.js에서 생성된 앱 인스턴스를
📂public > index.html의 DOM 요소(id=’app’)에 mount해준다.
Vue Application Instance를 웹 페이지에 삽입하거나 연결하는 것을 말한다.
Vue Application Instance는 JavaScript 객체로 정의 되며,
이 객체를 웹페이지의 HTML 요소에 연결하여 화면에 표시한다.
Vue는 mount된 요소를 감시하고, 변경사항을 화면에 반영한다.
Vue 프레임워크로 동작하는 Application의 기본단위이다.
Vue Application Instance 하나가 웹사이트 전체라 보면 된다.
이 Vue Application Instance 내부에서 여러 컴포넌트를 조합해 페이지를 만들고,
페이지 간 이동을 설정(Routing)하여 하나의 웹사이트가 완성된다.
이렇게 생성된 Vue Application Instance에는 mount라는 API가 있다.
이 API를 통해 HTML Element에 Instance를 연결할 수 있다.
라우터 객체 생성 및 설정
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import { createWebHistory, createRouter } from 'vue-router';
import ProductList from '@/views/ProductList.vue';
import ProductMainList from '@/views/ProductMainList.vue';
import ProductNew from '@/views/ProductNew.vue';
import ProductDetail from '@/views/ProductDetail.vue';
const routes = [
{
path: '/products',
name: 'products',
component: ProductList,
children: [
{
path: '',
name: 'product-main',
component: ProductMainList
},
{
path: 'new',
name: 'product-new',
component: ProductNew
},
{
path: 'detail',
name: 'product-detail',
component: ProductDetail,
beforeEnter: (to, from, next) => {
if(!to.query.productNo) {
next({
path: to.path,
query: { ...to.query, productNo: 1 }
});
} else {
next();
}
}
}
],
redirect: { name: 'product-main'}
},
{
path: '/login',
name: 'login',
// import 구문을 직접 써줘도 된다.
component: () => import('@/views/LoginPage')
}
];
export const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior() {
// 항상 스크롤을 맨 위로 이동.
return { top: 0 };
}
})
🌵 createWebHistory는 HTML5의 History API를 사용하여 브라우저의 주소(url)를 동적으로 변경하면서, 전체 페이지를 다시 로드하지 않는 Routing mode를 설정한다.
웹 애플리케이션에서 url이 변경될 때 브라우저의 히스토리 스택이 업데이트되며
백/포워드 버튼 등을 통해 페이지 간 전환을 쉽게 할 수 있게 된다.
url에 공통 경로가 있다면 /product children key에 추가적인 자식 경로를 객체배열 형태로 써줄 수 있다.
router-view
return문을 이용하여 UI를 정의한다.
함수형 컴포넌트에서는 props(부모 컴포넌트에서 전달되는 데이터)를 이용하여 상태를 관리한다.
<router-view /> 해당 컴포넌트를 이용해서, 현재 활성화된 라우트에 해당하는 컴포넌트를 <router-view />가 있는 위치에 렌더링할 수 있다.
만약, 사용자가 ‘/’ url경로로 접근하면 🐝 router.js에 path: '/'로 설정된 컴포넌트가 <router-view />에 자동으로 렌더링된다.
- 🍪
<router-link to="...> <router-link :to={ path: 'product', params: { userId: 123 }}><router-link to="{ path: 'product', query: { productNo: 1 }}">- 사용자 네비게이션을 가능하게 하는 컴포넌트이다.
렌더링 될 때 href를 갖는 a태그로 렌더링된다.
- (Prop) replace
<router-link to="{ path: '/product' }" replace />router.push()대신,router.replace()를 호출하므로, 네비게이션은 히스토리 레코드를 남기지 않는다.
- (Prop) append
<router-link to="{ path: '/detail' }" append />/product에서 해당 링크로 이동한다면/product/detail경로로 이동하게 된다.
- (Prop) tag
<router-link to="/foo" tag="li">foo</router-link>- 다른 태그로 렌더링된다.
Vue Router Instance에 접근
Vue Router에 의해 자동으로 주입된 속성을 의미한다.
$:Vue Instance의 특수 속성
Vue Instance에 자동으로 추가되는 속성이나 메서드에는 접두사$가 붙는다.
사용자 정의 속성이나 메서드명과 충돌하지 않기 위해 사용한다.
🦕 라우터를 사용하여 프로그래밍적으로 경로를 이동할 때
1
2
3
4
5
6
7
this.$router.push('/main');
// router.js에 설정한 name으로도 경로이동할 수 있다.
this.$router.push({name: 'main'});
// 현재 경로의 param, query, name(경로) 등에 접근할 수 있다.
console.log(this.$route.param.id);