[ Vue ] Vue Router 사용하기 ( + query , params )

 

Vue Router

라우팅이란 웹 페이지의 간의 이동방법을 의미. 

Vue Router는

1) URL에 따라 보여줄 컴포넌트를 연결해 놓고,

2) 해당 URL로 이동했을때 연결된 컴포넌트를 보여준다.

 

 

Router 설치

npm i vue-router --save

 

routes 파일 생성

설치 후 routes.js 파일을 만들고,

사용할 컴포넌트들과 vue, vuerouter 등을 import 해준뒤 

 

ulr과 컴포넌트들을 연결해준다.

 

import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../views/Main.vue'
// route에 등록할 컴포넌트들 등록

Vue.use(VueRouter)

export const router = new VueRouter({
	mode : 'history' ,
    routes: [
      {
        name : 'main',
        path: '/',
        component: Main
      }
    ]
})  

 

참고

 path : 'url'    page의 url 경로 

 component : componentName   page의 url 경로 

 

 mode : 'history'   url의 해쉬 값 제거 속성

 

 

main.js에 router 연결

import Vue from 'vue';
import App from './App.vue';
//router 설정한 파일을 import
import router  from './router';

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
  router,
}).$mount('#app');

 

root component( App.vue )에 router 출력 <router-view>

라우팅으로 렌더링 해주는 부분이  <router-view>  태그이다. 

  <router-view> 로 페이지 표시 태그, 변경되는 url에 대한 해당 컴포넌트를 뿌려준다.

<!-- App.vue -->

<template>
  <div>
    <!-- 여기에 라우터가 컴포넌트를 그린다 -->
    <router-view></router-view>
  </div>
</template>

 

 

라우터를 링크로 등록하기 <router-link>

  <router-link> 는 페이지 이동 태그이다.
화면에서는 <a> 태그로 치환된다.

 

<a> 태그를 클릭하면 화면이 새로고침되는데 <router-link>는 이를 차단해준다.

preventdafalut 가 필요없다는 뜻 !

 

router-link의 :to 속성

path : 전달하려는 경로

query : JSON 형태이며 query string 형태로 전달되는 파라미터 

       -> $route.query로 접근

params : name 형태에서 파라미터를 전달할때 사용 

       ->$router.params로 접근

name : routes요소의 이름 기반으로 이동 가능

  

<!--Router.js-->

export const router = new VueRouter({
	mode : 'history' ,
    routes: [
     {
        path: '/user/:userId',  //:동적바인딩처리
        name: 'user',
        component: User
      }
    ]
})  


<!--components-->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

//   router.push({ name: 'user', params: { userId: 123 }}) 와 같은 역할
//   /user/123  으로 이동하게 된다

 

 

+ ) Query와 Params

Request객체는 API를 컨트롤 하기위한 메소드를 담고있는데 , 그중에 query와 params에 대해 정리해 보자면,

 

  params    주소에 포함된 변수

  query   주소 바깥 " ? " 이후의 변수

+ ) 만약에 &로 이어져 여러개인 query string 이라면 !

 

시작 -> ?  ex ) postId=1&id=3

다음 질의 (질의구분) -> &  ex ) postId=1&id=3

데이터 -> 변수=값  ex ) postId=1&id=3

       변수  postId , id    |     값  1 , 3

 

 

---

✓참고

velog.io/@skyepodium/Vue-Router-fijr95dn4j

hyeooona825.tistory.com/44

router.vuejs.org/kr/guide/essentials/named-routes.html

goodteacher.tistory.com/213