[Vue.js] 뷰 라우터 params 전달 feat. vue-router

[Vue.Js] 뷰 라우터 Params 전달 feat. vue-router

 

 

뷰 라우터를 통해 SPA를 구현하였다면

이제는 어떻게 분기된 라우터 간

구분값(?)을 전달할수 있을까 이다

 

위에서 언급한 구분값은 데이터가 될수도 있고

단순히 페이지 로딩에 필요한 해당 페이지의 

아이디 정보가 될수도 있다.

 

  기본 형태

[routes 설정]

//라우터 path 에 id 입력 가능 설정
const routes = [
    {
        path : '/blog/:id',
        component : Detail
    },
    {
        path : '/List',
        component : List
    }
]

[라우팅페이지.vue]

//url에 입력한 params 중 id 값
$route.params.id

 

  샘플 예제

아래 예제에서는

라우터에 param을 전달하여

해당 글의 인덱스값를 전달받아

해당 인덱스에 맞는 글을 랜더하는 예제이다

(주로 블로그에서 많이 쓰는 로직)

 

[router.js]

import {createWebHistory, createRouter} from 'vue-router';
import List from './components/List.vue';
import Detail from './components/Detail.vue';

const routes = [
    {
        path : '/blog/:id',
        component : Detail
    },
    {
        path : '/List',
        component : List
    }
]

const router = createRouter({
    history : createWebHistory(),
    routes
});

export default router;

[main.js]

import { createApp } from 'vue'
import App from './App.vue'
import router from './router.js';

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

[App.vue]

<template>
  <div>
    <router-view :blogs="blogs"></router-view>
  </div>
</template>

<script>
export default {
  name : 'App',
  data(){
    return {
      blogs : [
        {id : 0, title : '포스팅0', desc : '포스팅0 예제입니다.'},
        {id : 1, title : '포스팅1', desc : '포스팅1 예제입니다.'},
        {id : 2, title : '포스팅2', desc : '포스팅2 예제입니다.'},
        {id : 3, title : '포스팅3', desc : '포스팅3 예제입니다.'},
        {id : 4, title : '포스팅4', desc : '포스팅4 예제입니다.'},
      ]
    }
  }
}
</script>

<style>

</style>

[List.vue]

<template>
  <section>
    <h3>글목록 예제</h3>
    <ul>
      <li v-for="blog,i in blogs" :key="i">
        <h4>{{blog.title}}</h4>
        <p>{{blog.desc}}</p>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
    name : 'List',
    props : {
        blogs : Array
    }
}
</script>

<style>

</style>

[Detail.vue]

<template>
  <section>
    <h2>선택하신글은 아래와 같습니다</h2>
    <h3>{{blogs[$route.params.id].title}}</h3>
    <p>{{blogs[$route.params.id].desc}}</p>
  </section>
</template>

<script>
export default {
    name : 'Detail',
    props : {
        blogs : Array
    }
}
</script>

<style>

</style>

 

  실행 결과