Vue Router 사용하기

라우터의 컴포넌트

1. router-link

   라우터링크는 a태그와 유사하다. 링크 페이지로 이동하는 개념이다. 내 프로젝트 상에서 내부 이동은 라우터 링크를 사용한다. 만약 구글페이지나, 네이버 등 외부 페이지로 이동할 때는 a 태그를 사용한다.

2. router-view

   페이지가 바뀌었을 때 바뀐 페이지가 어느 영역에 랜더링 될 것인지에 대한 '영역'을 지정해주는 컴포넌트이다.

설치

$ npm install vue-router@4

// 또는
$ npm i vue-router

4버전이라는 것을 명시하지 않아도 4로 설치되며, 일반의존성 패키지로 설치한다.

Vue 라우터 import

//maim.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './routes'

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

routes 폴더 생성

index.js 파일, 페이지로 나눌 컴포넌트들 생성

// index.js

// vue-router 에서 createRouter 메소드 꺼내서 사용
// createWebHistory : 히스토리 모드 사용하기 위해 꺼내옴
import { createRouter, createWebHistory } from 'vue-router'
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'

export default createRouter({
  // 모드 지정(histor 또는 hash)
  // 정식으로 나가는 서비스는 거의 히스토리모드로 제공(백 서버 필요)
  history: createWebHistory(),
  // routes는 하나의 페이지 개념이다.
  // 각 라우트는 반드시 컴포넌트와 매핑되어야한다.
  routes: [
    {
      path: '/', // 'main'
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      // NotFound는 배열의 제일 마지막에 넣는다.
      // .은 임의의 한 문자. 어떤 문자를 최대한 많이(*) 일치시키고 notfound에 넣어라(모든 페이지 매칭)
      path: '/:notfound(.*)*',
      component: NotFound
    }
  ]
})

$router 와 $route

라우터를 주입하였으므로 this.$router와 현재 라우트를 this.$route로 접근할 수 있다.

$route는 현재 페이지에대한 정보가 들어있다.

// Home.vue
export default {
  computed: {
    username () {
      return this.$route.params.username
    }
  },
  methods: {
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    }
  }
}

$router를 사용하는 이유 : 라우터를 조작해야하는 모든 컴포넌트에서 라우트 객체를 가져올 필요가 없기 때문이다.$router는 명령들의 객체이다. 명령을 ‘실행’하기 위해서는 함수 형태여야한다. 예를들어 $router에는 push 라는 메소드가 있는데 그 인수에 주소가 들어갈 수 있다. (/about 이런식..)