[Vue.js] #10 vue-router 데이터 전달하기 (params, props)

1. main.js

props로 받겠다 true 설정

import { createApp } from 'vue'
import { createWebHistory, createRouter } from 'vue-router';
import App from './App.vue'
// router 쓰일 Component
import Home from './views/Home.vue';
import About from './views/About.vue';
import User from './views/User.vue';
import UserDetail from './views/UserDetail.vue';

//routes 정하기
const routes = [    
  { path : '/', component: Home, name:"home"},
  { path : '/about', component: About, name:'about2' },
  { path : '/user', component: User },
  { path : '/user/:id', component: UserDetail, props: true },
]

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

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

 

2. /view/UserDetail.vue

- params로 받거나

- props로 받기 가능

<template>
<h1>UserDetail</h1>
<h2>주소의 params로 받은 id : {{ $route.params.id }}</h2>
<div>props로 받은 id : {{ id }}</div>
</template>

<script>
export default {
  props : {
    id : String
  }
}
</script>

 

[실행결과]