[vue] vue router 로 데이터 전달

vue router에 데이터 전달하는 방법은 두 가지가 있다.

• params
• query

params 전달하기
{name: 'Params', params: {name: 'cherry', ranking: 1}}

query로 전달하기
{name: 'Query', query: {name: 'cherri', ranking: 1}}

params로 전달하는 경우 route 옵션에서 props: true로 설정하면 props로 값을 받을 수 있다.

params로 전달하기

const router = new VueRouter({
    mode: 'hash',
    routes: [
        {
            path: 'event/awards',
            name: 'eventDetail',
            component: () => import('@/views/detail.vue'),
            meta: {
              key: 'Event'
            },
            props: true
          }   
    ]
})

params로 받기

<script>
    export default {
        name: 'Params',
        props: {
            name: {
                type: String,
                default : ''
            },
            ranking: {
                type: Number,
                default: 0
            }
        }
    }
</script>