Vue Router(1)

라우터란? (Router)

vue에서 말하는 라우터는 URL에 따라 어떤 페이지를 보여줄지 매핑을 해주는 라이브러리이다.

 

설치

npm install vue-router

 

정의

[라우터/ router]

경로: src/router/index.js

해당 경로에 라우터 객체를 생성한다.

 

[라우트/ route]

각 라우트들은  URL에 대한 컴포넌트를 매핑해줄 정보를 정의한다.

 

사용방법

1. routes 정의하기

각 route에 대한 매핑정보를 정의하고 routes 배열을 생성한다.

// src/router/index.js
import HomeView from '@/views/HomeView.vue';
import AboutView from '@/views/AboutView.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView,
  },
];

 

2. 라우터 설정하기

router를 설정하기 위해 만들어 놓은 routes와 history를 가지고 createRouter

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
import AboutView from '@/views/AboutView.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView,
  },
];
const router = createRouter({
  history: createWebHistory('/'),
  routes,
});

export default router;

 

3. vue인스턴스에 설정한 라우터를 추가한다. 

use() 메서드를 이용해 호출함으로써 컴포넌트 내부에서도 $router, $route 객체에 접근할 수 있게 된다. 

import { createApp } from 'vue';

import App from './App.vue';
import router from './router';

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

 

 

 

네비게이션

vue Router는 페이지를 리로딩 하지 않는다. 이미 매핑된 페이지를 렌더링하는 것이다. 

 

<RouteLink>와 <RouteView>로 vue라우터를 사용한다. 

<router-link>: 일반적으로 a태그를 사용하는 대신 쓰이고 페이지 이동 역할을 한다. router-link를 통하여 다른 페이지 링크를 만들어 낸다. 

 <RouteView>: URL에 매핑된 컴포넌트를 화면에 표시한다. 

 

 

router, route 호출하기 

[router] : 라우터 인스턴스로 javascript에서 다른 페이지(컴포넌트)로 이동할 수 있다.

- Options API: this$router

- Composition API: useRouter()

- template: $router

 

[route]: 현재 활성 라우트 정보에 접근할 수 있다. 

- Options API: this$route

- Composition API: useRoute()

- template: $router

 

<template>
  <div>
    <p>params: {{ $route.params }}</p>
    <p>query: {{ $route.query.searchText }}</p>
    <p>hash: {{ $route.hash }}</p>
  </div>
</template>

 

 

<button @click="$router.push('/')">Home 페이지로 이동</button>

 

 

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();
const goPage = () => {
  router.push({
    name: 'pingPong',
  });
};
</script>

 

 

 

https://router.vuejs.org/guide/

Getting Started | Vue Router