Vue.js - vue router

이번에는 vue-router에 대해서 더 적어보려고 한다.

아마 이전에 vue-router에 대해서 적기는 했는데, 그래도 이번에 다시 배우면서

복습도 해볼겸 새로운 마음으로 다시 정리하려고 합니다.

(만약 이전글도 보고 싶다면 아래의 링크에 들어가보셔도 됩니다.)

https://jhhan009.tistory.com/27?category=773859 

Vue.js 기초(3)_라우터

 

vue-router 역시 → 기본지식이 있다는 가정하에 적겠습니다.

 

1. vue-router설치

이 글을 적고 있는 날짜 기준으로 vue-router 4버전을 사용하고 있습니다.

그래서 vue-router 4버전을 설치합니다.

npm install vue-router@4

해당 명령어를 입력하면 vue-router 4버전을 설치할 수 있습니다.
(만약 안된다면, vue-router 공식 홈페이지에 들어가서 확인하시면 됩니다.)

 

2. 태그들

vue-router를 사용한다면 다음의 태그들을 사용할 수 있습니다.

• router-view
• router-link

2-1. router-view

: 라우터로 구분된 페이지를 router-view 태그에서 보이게 합니다.

2-2. router-link

: 페이지를 이동하는 링크를 만들고 싶다면 router-link 태그를 사용하면 됩니다.

  그리고 그 안에 옵션으로 to="경로" 를 추가하면 됩니다.

(이 태그들에 대한 예시는 따로 적지 않겠습니다.)

 

3. url 파라미터

router-link 태그의 옵션 to에는 경로를 적는데, 경로가 동적으로 작동해야할 경우도 있습니다.

예를 들어, 상세페이지로 이동하는 경우

• /detail/0
• /detail/1
• /detail/2
• ...

이렇게 상세페이지를 보여줄 수 있는 url이 있을 수 있습니다. 그럼 우리는 뒤에 붙는 숫자를 잘 입력받을 수 있으면 되겠습니다.

그럼 어떻게 해야할까요?

// router.js
const routes = [

    // skip

    {
        path: '/detail/:id',
        component: Detail,
        name: 'detail'
    },

    // skip
    
];

router.js(혹은 라우터 정보를 담고있는 js파일)에서 routes정보를 추가할 때

path에 위와 같은 코드를 적으면 됩니다.

':'(콜론)을 사용하면 뒤에 어떤 문자를 입력하더라도 인식을 하게 됩니다.
(이것을 url 파라미터 문법이라고도 한다고 합니다..)

 

그리고 url 파라미터를 좀 더 유용하게 사용할 수도 있습니다.

만약 'id 자리에 숫자만 입력받게 하고 싶다'라는 조건을 붙이고 싶을 수도 있습니다.

그럴 때는 정규식을 사용하면 됩니다.

• path: '/detail/:id(\\d+)'
• 이렇게 정규식을 붙이면 숫자만 입력받게 할 수도 있습니다.

이렇게 정규식을 사용한다면 좀 더 조건을 걸어서 url을 활용할 수 있습니다.

 

그러면 router.js에 저렇게 추가를 했으면, 화면에서도 이것을 받을 수 있어야 합니다.

/detail/0 , /detail/1 과 같은 url을 입력받으면

나도 0, 1 과 같은 값들을 받고 싶죠. 그럴 때는 어떻게 해야할까요?

 

$route.params.{파라미터명}를 사용하면 됩니다.

그리고 path에 입력한 변수(예시에서는 id 였죠)를 뒤에 붙여주면 됩니다.

즉, $route.params.id를 쓰면 됩니다.

그러면 url에 입력한 값을 받아서 사용할 수 있습니다.

 

4. $router

router-link를 사용하는 방법 말고 또 다른 페이지 이동 방법이 있습니다.

$router를 쓰면 되는데요.

// 페이지 이동
$router.push("/detail/0");

// 변수와 같이 진행
$router.push("/detail/" + index);

// 뒤로 한번 가기
$router.go(-1);

// 뒤로 두번 가기
$router.go(-2);

// 앞으로 한번 가기
$router.go(1);

• $router.push를 사용하면 됩니다. 그러면 원하는 페이지로 이동하는 것이 됩니다.
• $router.go를 사용하면 뒤로가기, 앞으로가기 기능을 구현할 수도 있습니다.

 

5. Hash mode, HTML5 mode

router.js 파일을 만들 때 있어서 아마도 다음과 같은 코드를 사용할 것 같습니다. (HTML5 mode)

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

const router = [
	// 생략
];

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

여기서 createWebHistory를 사용하는 것이 문제가 될 수 있습니다.

그래서 다른 것을 쓰는 경우도 있는데요.(Hash mode)

import { createRouter, createWebHashHistory } from 'vue-router'

const router = [
	// 생략
];

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

createWebHashHistory를 사용하면 해결할 수 있다고 합니다.

대신 이것을 선택하면 모든 url에 #이 붙어서 진행됩니다.

ex) ~~~/#/main

 

Hash mode를 사용하면 장점은

url에서 # 뒤에 있는 경로는 절대로 서버로 전달되지 않습니다.

그래서 서버전송이 필요없는 경로의 경우 #을 붙여서 해결할 수 있습니다.

반면 HTML5 mode는 서버전송을 따로 막는 경우가 없습니다.

예를 들어, ~~/main이 서버에 갈 필요가 없는 url인 경우라도 항상 서버를 거치게 됩니다.

이런 문제를 방지하려면 저런 url들을 따로 모아서 서버 전송을 하지 않고
vue 라우터가 해결할 수 있도록 기능개발을 해야 합니다.

 

 

 

이렇게 다시 vue-router에 대해서 알아봤습니다.

물론 이러한 내용으로 vue-router를 완전히 배웠다고 할 수 없습니다.

그래도 간단한 vue 프로젝트를 진행할 때는 나름 유용하게 쓸 수 있을 것 같습니다.

만약 부족하거나 더 알고 싶다면

https://next.router.vuejs.org/ (뷰 라우터 4 페이지에 들어가서 확인하면 됩니다.)

이상입니다.

 

 

 

 

출처 : 코딩애플 - 인스타그램을 만들며 배워보는 Vue.js 3 완벽 가이드