[Vue.js] vue-router

Vue-Router

SPA를 구현하기 위해 페이지 간 이동을 위한 라이브러리이다.
페이지 이동 시 URL 이 변경되면 변경된 요소의 영역의 컴포넌트를 갱신한다.

Vue-Router 시작하기

npm install vue-router --save

Vue-Router 사용하기

1.src\router\index.js 파일 생성

import { createWebHistory, createRouter } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'home',
  }
 ];

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

2. main.js 수정

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

Vue 2 version과 최신 vue-router 라이브러리를 함께 사용하니
계속해서 오류가 발생했다. 이렇게 설정해두면 오류가 발생하지 않고 작동된다.

다른 문서들에서 확인한 vue-router 사용법은 조금 차이가 있었는데 일단 명시해두어야지.

• router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

export default new VueRouter({
  mode: 'history',
  routes: [{
    path: '/',
    name: 'home',
  }]
});

• main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router/index.js';

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

사용법

router/index.js 파일 내에
routes에 path 와 name, component 를 설정해준다.
component는 import 해서 사용 가능한데

const Home = () => import("@/components/Home.vue");

const routes = [
  {
    path: '/',
    redirect: '/home',
  },
  {
    path: '/home',
    name: 'home',
    component: Home,
  }
 ]

이런식으로 import 해서 새로운 변수로 설정해 사용할 수도 있고

const routes = [
  {
    path: '/',
    redirect: '/home',
  }, {
    path: '/home',
    name: 'home',
    component: () => import('@/components/Home.vue')
  }
 ]

이런식으로 바로 import 해서 사용할 수도 있고
아니면 아예

import Home from '@/components.Home.vue';

const routes = [
  {
    path: '/',
    redirect: '/home',
  }, {
    path: '/home',
    name: 'home',
    component: Home,
  }
 ]

이렇게 import 해서 적어줄 수도 있다.

router 이동

this.$router.push({ path: '/home' });
this.$router.push({ name: 'home' ]);

<template>
	<router-link :to="{ name: 'home' }"></router-link>
</template>

<router-link> 태그를 사용해 이동을 구현할 수 있다. to 값에 이동하고자 하는 라우터를 명시한다.

router component 렌더링

라우팅 적용할 최상위 컴포넌트에
ex) App.vue

<template>
  	<div id="app">
    	<router-view></router-view>
	</div>
</template>

<router-view> 이 태그가 바로 라우터 컴포넌트가 표시될 공간이다.

중첩 라우팅 (Nested Routing)

하나의 컴포넌트가 하위에 여러개의 컴포넌트를 갖는다.

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      {
        path: '/:id',
        component: UserProfile,
      }
     ],
  }
 ]

이렇게 user 하위에 id 를 parameter로 갖는 중첩라우팅도 가능하다.

여기서 id 값을 사용하려면?

<script>
  export default {
	computed: {
      userId() {
        return this.$route.params.id;
      }
    }
}
</script>

parameter 로 넘어온 id 값을 userId 변수처럼 선언해 사용할 수 있다.
query로 넘긴 것도 this.$route.query 로 사용할 수 있다.

push, go, replace 의 차이점

1) push

history 스택에 쌓이므로 뒤로가기/앞으로가기 가능

this.$router.push('home');

2) go

특정 숫자만큼 뒤로가기/앞으로가기 할 때 사용

this.$router.go(-1) // 하나 뒤로

3) replace

history 스택에 쌓이지 않음

this.$router.replace('about'); // 기존 페이지에서 about 으로 넘어감