[Vue] Router(1) 기본, 동적 Routing

# Routing이란?

네트워크에서 경로를 선택하는 프로세스
웹 애플리케이션에서 다른 페이지 간의 전환과 경로를 관리하는 기술

장고 → 뷰가 되면서 주체가 서버에서 클라이언트로 바뀜

즉, 페이지 간의 전환이 없어지면서 페이지가 한 개지만

링크에 따라 여러 컴포넌트를 렌더링해서 여러 페이지를 사용하는 것처럼 느끼도록 해야함

 

 

만약, routing이 없다면

• URL을 통한 페이지의 변화를 감지할 수 없음
• 새로고침하면 처음 페이지로 돌아감
• 뒤로가기 기능을 쓸 수 없음

 

---

# vue에서 Router 써보기

Vue Router = 뷰의 공식 라우터
공식문서 웬만하면 영어로 보는걸 추천
하지만 우리는 Vite를 쓰니까 좀더 편하게 가능!

처음에 프로젝트 만들 때,

네모친 부분만 Yes로 바꿔주면 바로 router 사용 가능

그럼 서버 열었을 때 앞에서와 다르게 

새로운 버튼이 생겨서 누르면 페이지 + url이 바뀌는 것을 확인할 수 있다

 

 

 

 

✔ 추가적으로 바뀐 것들

• src에 router과 views가 생김
• App.vue에 새로 생김

// App.vue
<nav>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink>
</nav>

<RouterView />

여기서 추가적으로

# RouterLink?

페이지를 다시 로드하지 않고 URL을 변경, 생성 및 관련 로직을 처리하는 역할

HTML에서는 a태그로 랜더링된다

 

# RouterView

URL에 해당하는 컴포넌트를 표시

어디든 배치 가능

• router 폴더에 index.js가 생김

이전 장고에서 했던 urls.py랑 비슷한 역할 = router에 URL과 컴포넌트를 매핑해줌

• views 폴더
  routerview 위치에 랜더링할 컴포넌트를 배치
  기존 components 폴더와 기능적으로는 같지만 분류해주기 위해
  일반 컴포넌트와 구분하기 위해 이름끝에 View를 붙여주는게 권장

왜 about에 있는 component는 다를까?

 

# Lazy Loading Routes

첫 빌드 시 해당 컴포넌트를 로드하지 않고,

해당 경로를 사용자가 방문하면 그 때 로드한다

 

보통 컴포넌트가 크면 로딩 시간을 줄이기 위해 쓴다

(우리는 사실 이걸 쓸만큼 큰게 없긴해서 참고만 하자)

---

그러면, 하는 방법?

1. index.js에 라우터 관련 설정을 작성(주소, 이름, 컴포넌트)

네모친 부분

2. RouterLink의 to속성으로 index.js에서 정의한 속성 값(path) 사용

<RouterLink to="/">Home</RouterLink> 
<RouterLink to="/about">About</RouterLink>

 

근데 index.js에서 보면 이름이 있다?

이름은 왜 있지?

→ Named Routes를 위해서

 

Named Routes를 이용하면..

• URL 하드코딩 안해도 되고
• 경로가 바껴도 이름으로 쓰기때문에 한번만 바꿔줘도 된다

<RouterLink :to="{ name: ' home' }">Home</RouterLink>
<RouterLink :to="{ name: 'about' }">About</RouterLink>

이런식으로 v-bind를 이용해서 변경 가능

 

---

# 동적 Routing

= Dynamic Route Matching with Params

장고에서 했던 Variable Routing과 비슷하다

 

 

함 해보자고

0. views폴더 안에 userView.vue 파일 하나 만들어두기

 

1. router/index.html 에서 기본 정보 추가해주기

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

이때 장고에서 url에 /<int:uesr.id>이거 처럼 여기서는 매개변수 앞에 :을 찍어준다.

 

2. App.vue에서 추가

// script에 추가
import {ref} from  'vue'
const userId = ref(1)

// template에 추가
<RouterLink :to="{ name: 'user', params:{id: userId} }">Profile</RouterLink>

 

3. 몇번 유저의 페이지인지 알려주고 싶다면?

userView.vue 파일에서 template에 추가해준다

<h3>{{ $route.params.id }}번 유저의 페이지입니다.</h3>

근데, 반응형 변수를 template에 쓰는건 권장되는 사항이 아님..

그럼 script 쪽에서 쓸 수 있을까?

// script 부분
import { ref } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const userId = ref(route.params.id)

// template 부분
<h3>{{ userId }}번 유저의 페이지입니다.</h3>

 

 

완성!

새로생긴 Profile과 설명