라우팅, 라우터?

routing : 웹페이지간 이동방법

• 페이지를 이동할 때 서버에 요청해 갱신하는 것이 아니라, 미리 해당 페이지를 구성해놓고 클라이언트의 라우팅을 이용하여 화면을 갱신합니다.
  • 이러한 방식을 SPA (Single Page Application) 라고도 합니다.
• 라우팅을 이용하면 매끄럽게 화면 전환을 할 수 있습니다.
• Vue, React, Angular 모두 라우팅을 이용하여 화면을 전환합니다.
• 단순 라우팅만 필요하면 라이브러리를 쓰지 않아도 됩니다.

vue-router

• Vue 에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리입니다.
• <router-view> : 페이지 표시 태그 , 변경된 URL에 따라 해당 컴포넌트를 뿌려주는 영역입니다.

라우터 사전 설정

# terminal
npm install vue-router

0. Vue와 Vue 라우터를 import 합니다.

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

1. 라우트 컴포넌트를 정의합니다.

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 보통 import를 통해서 정의합니다.
import Foo from '../views/Foo.vue'
import Bar from '../views/user/Bar.vue'

2. 라우트를 정의합니다.

• 반드시 component와 매핑되어야 합니다.

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

3. 'routes' 옵션과 함께 router 인스턴스르 만듭니다.

const router = new VueRouter({
  routes // `routes: routes`의 줄임
})

4. 루트 인스턴스를 만들고 mount 합니다.

const app = new Vue({
  router
}).$mount('#app')

// main.js
new Vue({
  router,
  vuetify,
  store,
  render: h => h(App)
}).$mount('#app')

• 라우터를 주입하면 this.$router 와 현재 라우터(router)를 this.$route 로 접근할 수 있습니다.

코드 예제 보러가기

선언적 방식

• <router-link to="path" replace> : 페이지 이동 태그, 화면에선 <a> 태그로 치환됩니다.
  • replace를 사용할 경우 속성으로 넣어줍니다.

프로그래밍 방식

• router.push('path') :

// login path를 가진 컴포넌트 페이지로 이동합니다.
this.$router.push('/login');

• router.replace('path') : 새로운 히스토리 항목에 추가하지 않고 현재 항목을 대체합니다.
• router.go(n)

// 한 단계 앞으로 갑니다. history.forward()와 같습니다. history.forward()와 같습니다.
router.go(1)

// 한 단계 뒤로 갑니다. history.back()와 같습니다.
router.go(-1)

// 3 단계 앞으로 갑니다.
router.go(3)

// 지정한 만큼의 기록이 없으면 자동으로 실패 합니다.
router.go(-100)
router.go(100)

<a> 태그 대신 <router-link> 를 쓰는 이유

• history 모드와 hashbang 모드는 주소 체계가 달라서 <a> 태그를 사용할 경우 모드 변경시 주소값을 일일이 변경해 줘야합니다. 하지만 는 변경할 필요가 없습니다.
  • hashbang(#!) : URL에서 발견할 수 있는 특수문자 "#!" 입니다. (국내에서 거의 사용을 안합니다.)
• <a> 태그를 클릭하면 화면을 갱신하는데 <router-link> 는 갱신 없이 화면을 이동할 수 있습니다.