[vue.js] router설정 및 이동

router로 주소경로를 설정하고 파라미터를 받아서 해당 router 주소로 가는 방법.

 

[구조]

data.js -> app.vue (data)전달 전송

- data는 data.js -> app.vue -> detail.vue로 전달

- url parameter는 router에서 /detail/:id로 정의하고 detail.vue에서 '$route.params.id'로 받아서 사용

 

[App.vue]

<script setup>
	import data from '{data.js}';
</script>

<template>
  <router-view :data="data" />
</template>

<style scoped lang="scss">
</style>

-data를 router에 전달한다

 

[router.js]

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: TitlePage },
    { path: '/detail/:id', component: Detail },
  ]
})

export default router;

- 메인페이지와 detail페이지를 선언한다

- detail뒤에 id값을 받아서 경로를 지정한다(detail/{id} 형식으로 url생성)

- id는 파라미터로 받아함.

 

[data.js]

const data = [
    {
      id: 0,
      title: "my_title",
      imgUrl: "/images/work1.jpg",

    },
    {
      id: 1,
      title: "대기오염 정보 앱",
      imgUrl: "/images/work2.png",
    },
  ]
  
  export default data;

 

[Detail.vue]

<template>
  <section id="detail" class="container">
    <h1>{{ data[$route.params.id].title }}</h1>
    <articl5>
      <img 
        :src="`${data[$route.params.id].imgUrl}`" 
        :alt="`${data[$route.params.id].title}`"
      />
      <p>{{ data[$route.params.id].desc }}</p>
      <small class="text-secondary">{{ data[$route.params.id].skills }}</small>
    </article>
  </section>  
</template>
  
<script setup>
  const props = defineProps({
    data: Array,
  }) 
</script>
  
<style lang="scss" scoped>
</style>

- url에 오는 :id 값을 '$route.params.id'로 받아서 사용한다