[Vue] Vue router ( + props 전달 )

Vue Router

라우팅은 컴포넌트간의 이동을 안내해주는 역할

1. 먼저 컴포넌트들의 Route를 정의한다. 

2. <router-view> Tag를 사용하여 해당 route에서의 컴포넌트를 보여준다.

 

Router 설치

npm i vue-router --save

 

routes 파일 생성   ( /src/router/routes.js )

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

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

 

 route와 컴포넌트들을 연결해준다.

 

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
      }    // public.path + '/' 접속 시 Main router-view는 Main Componet를 보여준다.
    ]
})

( * public path를 설정하는 방법 )

  vue.config.js 파일의 module.exports 에 다음과 같이 등록한다. 

module.exports = {

publicPath: "your+public+link",

}

vue project 실행 시 public path가 메인 링크로 뜨게됨

설정한 publicPath로 실행되는 모습

 

main.js에 router 연결 ( /src/main.js )

 

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


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

 

App.vue에서 라우터를 이용한 component 렌더링

 

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

<!-- App.vue -->

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

 

Vue 렌더링 시 router-view를 변경하고 싶다면

 

this.$router.push 를 통해 원하는 루트로 간다. 

push call은 history 스택이 쌓이는 명령어로 뒤로가기 버튼을 누르면 다시 돌아온다.

replace call은 history 스택이 쌓이지 않는다.

<!-- *.vue -->

<script>
  export default {
    data() {
      return {
      }
    },
    created() {
      this.$router.push('yourRoute')
    },
  }
</script>

 

클릭 시 route 변경 방법

 

 

this.$router.push 를 통해 원하는 루트로 간다. 

push call은 history 스택이 쌓이는 명령어로 뒤로가기 버튼을 누르면 다시 돌아온다.

replace call은 history 스택이 쌓이지 않는다.

<router-link to="yourRoute" >클릭 시 변경<router-link/>

 

Router Props 전달 방법

 

<router-link :to={path:"/info" , query: {name : 'CHS' } }> 쿼리 & path 방식 전달 <router-link/>
<router-link :to={name:"Info" , query:{name : 'CHS' } }> 쿼리 & name 방식 전달 <router-link/>

<router-link :to={path:"/info" , params: {name : 'CHS' } }> 파라미터 & path 방식 전달 <router-link/>
<router-link :to={name:"Info" , params: {name : 'CHS' } }> 파라미터 & name 방식 전달 <router-link/>

path : 전달하려는 경로

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

       -> $route.query로 접근

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

       ->$router.params로 접근

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

 

위 방법으로 전달 시 Address 모습

 

query : ~~~~~~~/info?name=CHS

    -> id:3 이라는 추가 props : ~~/info?name=CHS&id=3

params : ~~~~~~~/info/CHS

    -> id:3 이라는 추가 props : ~~/info/CHS/3

 

query 방식은 key value 가 모두 드러나는 반면 params 는 value 값만 드러나기 때문에 좀 더 안전해보인다(?)