[Vue3] Router

간단히 Routing이란?
네트워크에서 경로를 선택하는 프로세스이다. 웹 애플리케이션에서는 다른 페이지 간의 전환과 경로를 관리하는 기술을 말한다.

SSR에서 Routing

• 서버는 사용자가 방문한 URL 경로를 기반으로 응답을 받아 처리한 후 HTML을 보내어 응답을 수신한다. 즉 브라우저에서는 전체 페이지가 다시 로드된다.

CSR/SPA에서의 Routing

• SPA에서 routing은 브라우저의 클라이언트 측에서 수행된다. 클라이언트 측의 javascript가 새 데이터를 동적으로 가져오기 때문에 페이지가 다시 로드 되지 않는다. 즉 페지이는 1개이고, 링크에 따라 여러 컴포넌트를 렌더링하여 여러 페이지를 사용하는 것처럼 보이도록 한다.

---

참고 - vue-router 공식 문서

Vue에서 Router 사용하기

1. vue-router 라이브러리 설치

npm install vue-router

2. 모든 컴포넌트에서 전역으로 선언적 방식의 router를 사용하기 위해 App.vue에 Vue.use()를 사용해 router를 사용할 것을 선언한다.

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

Vue.use(VueRouter)

3. router 폴더의 index.js에 아래와 같이 router하는 경로를 정의한다.

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },

4. 컴포넌트에서 사용하는 방법은 아래와 같다.

• 선언적 방법
  

매개변수를 사용한 동적 경로 매칭

• route를 정의 할 때는 :를 활용하여 동적 경로를 매칭 할 수 잇다.

  routes: [
    {
      path: '/user/:id',
      name: 'user',
      component: UserView
    },

• 컴포넌트에서 동적 경로에 접근할 때는 사용할 때는 아래와 같이 사용할 수 있다.
  - 선언적 방법으로는 $route.params.query로 사용 할 수 있다.

		<h1>{{$route.params.id}}</h1>

- composition api 방식을 권장한다.

		import {useRoute} from 'vue';
		const userId = ref(route.params.id);

route.params는 동적 경로에 매개변수로 접근할 수 있고, route.query를 사용하면 query string에 동적으로 접근가능하다.

Navigation Router

1. 다른 위치로 이동하기

• push : 이동할 항목을 history stack에 push하기 때문에 뒤로가기 버튼을 클릭하면 이전 URL로 이동이 가능하다.

    - 선언적 방식
    <RouterLink : to="...">
    
    - 프로그래밍 방식
    router.push(...)

2. 현재 위치로 바꾸기

• replace : 이동할 항목을 history stack에 넣지 않고 새로운 URL이동하기 때문에 뒤로 가기가 불가능하다.

    - 선언적
    <RouterLink : to="..." replace>
    
    - 프로그래밍 방식
    router.replace(...)

route와 router의 차이
route는 주소이다.
router는 주소를 넘겨준다.