[Vue.js] Vue 라우터: URL 데이터 전달 방식

URL 데이터 전달 방식

params(path variables)로 전달

라우트 정의

{
  path: "/menu01/exam06view/:bno",
  name: "menu01_exam06view",
  component: () => import(/* webpackChunkName: "menu01" */ '../views/menu01/Exam06View'),
  props: true
}

• props: true로 설정하면, $route.params가 컴포넌트의 props에 설정됨

Exam05View

<template>
  <div class="card">
    <div class="card-header">
      Exam05View
    </div>
    <div class="card-body">
      <h6>params(path variables)로 전달</h6>
      <ul>
        <li><router-link to="/menu01/exam06view/1">exam06view/1</router-link></li>
        <li><router-link v-bind:to="`/menu01/exam06view/${bno1}`">exam06view/3</router-link></li>
        <li><router-link :to="{path: `/menu01/exam06view/${bno2}`}">exam06view/5</router-link></li>
        <li><router-link :to="{name: 'menu01_exam06view', params: {bno: bno3}}">exam06view/7</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name:"Exam05View",
  data: function() { // () => {
    return {
      bno1: 3,
      bno2: 5,
      bno3: 7
    };
  }
}
</script>

<style scoped>
  
</style>

Exam06View: params 데이터 얻기

<template>
  <div class="card">
    <div class="card-header">
      Exam06View
    </div>
    <div class="card-body">
      <h6>params(path variables)로 데이터 얻기</h6>
      <div>bno: {{$route.params.bno}}</div>
      <div>bno: {{bno}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name:"Exam06View",
  //LifeCycle Hook : 컴포넌트가 생성될 때 실행되는 메소드
  created() {
    console.log("Exam06View 컴포넌트가 생성됨");
    console.log(this.$route);
    console.log(this.$route.params.bno);
  },
  props: [
    "bno"
  ]
}
</script>

<style scoped>
  
</style>

• $route는 URL 참조 ↔ $router는 객체 참조

 

정적 객체로 전달

라우트 정의

{
  path: "/menu01/exam07view",
  name: "menu01_exam07view",
  component: () => import(/* webpackChunkName: "menu01" */ '../views/menu01/Exam07View'),
  props: {kind:"freeboard", color:"blue"}
}

• 아래 코드와 동일한 효과

<exam-07-view kind="freeboard", color="blue" />

<route-link> 정의

<router-link to="/menu01/exam07view">exam07view</router-link>

컴포넌트 정의

<template>
  <div class="card">
    <div class="card-header">
      Exam07View
    </div>
    <div class="card-body">
      <div>kind: {{kind}}</div>
      <div>color: {{color}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name:"Exam07View",
  props: [
    "kind",
    "color"
  ]
}
</script>

<style scoped>
</style>

UI 화면 출력

 

쿼리  스트링(Query String)으로 전달

라우트 정의

{
  path: "/menu01/exam08view",
  name: "menu01_exam08view",
  component: () => import(/* webpackChunkName: "menu01" */ '../views/menu01/Exam08View'),
  props: (route) => ({
    kind: route.query.kind,
    color: route.query.color
  })
}

<route-link> 정의

<template>
  <div class="card">
    <div class="card-header">
      Exam05View
    </div>
    <div class="card-body">
      <h6>쿼리스트링으로 전달</h6>
      <ul>
        <li><router-link to="/menu01/exam08view?kind=freeboard&color=blue">exam08view?kind=freeboard&color=blue</router-link></li>
        <li><router-link :to="`/menu01/exam08view?kind=${kind1}&color=${color1}`">exam08view?kind=freeboard&color=blue</router-link></li>
        <li><router-link :to="{path: `/menu01/exam08view?kind=${kind2}&color=${color2}`}">exam08view?kind=album&color=red</router-link></li>
        <li><router-link :to="{name: 'menu01_exam08view', query: {kind: kind3, color: color3}}">exam08view?kind=qna&color=yellow</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name:"Exam05View",
  data: function() {
    return {
      kind1: "freeboard",
      color1: "blue",
      kind2: "album",
      color2: "red",
      kind3: "qna",
      color3: "yellow"
    };
  }
}
</script>

<style scoped>
</style>

컴포넌트 정의

<template>
  <div class="card">
    <div class="card-header">
      Exam08View
    </div>
    <div class="card-body">
      <div>kind: {{$route.query.kind}}</div>
      <div>color: {{$route.query.color}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name:"Exam08View"
}
</script>

<style scoped>
</style>