[Vue.js] 라우터 활용

vue-router 설치

NPM을 이용하여 설치가능

npm install vue-router

그 후 src 밑에 router.js를 만듬

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router); // 라우터를 사용하겠다는 표시

위와 같이 import 밑 use 해준다.
main.js에서도 import router from ‘./router’ 로 라우터를 사용, 또 new Vue 안에 router 선언을 해준다.

vue.js에서의 Router 활용

router-link to =”/path”=> 원하는 path로 이동함 (nav안에 사용하고 router-view로 보여줄 수 있다.)

this.$router.pramas => 이 라우터의 파라미터값을 가져올 수 있다.
this.$router.go(-1) => 뒤로 돌아감
this.$router.push(‘/’) => 원하는 /아래 경로로 들어감

router.js에서 세가지 요소

path: /.. => 경로 (ex. path: ‘/about’ => localhost:8080/about)
name: .. => 이름
componet: .. => 이동하는 component

path: ‘about/:id’ => 뒤에 다 id값을 붙여주면 같은 about으로 이동하지만, id값을 파라미터로 전달함(수정, 추가를 위한)

import로 해당 위치의 컴포넌트를 불러와야된다.