[Vue.js] 페이지 동적라우팅

동적라우팅 이란?

• 일정한 패턴의 주소를 하나의 컴포넌트에 연결하는 방식

동적라우팅이 필요한 이유

• 전혀 다른 2개의 페이지를 만들때는, 2개의 페이지를 각각 만들면 됨
• 하지만 비슷한 페이지 2개를 만들때, 굳이 따로 만들 필요가 없음
• 이때, 동적라우팅을 사용하면 페이지 하나로 조금 다른 2개 이상의 페이지를 만들어 낼 수 있음
• 전에 Vue 페이지 라우팅 여기서는 거의 같은 page 2개를 따로 만들었었는데, 하나의 page만 만들어 2개의 page를 출력하는 예제
• params속성, query속성을 참고하면 좋을듯

예제

App.vue

<template>
  <div id="app">
    <v-btn @click="movetopage1">1페이지로</v-btn>
    <v-btn @click="movetopage2">2페이지로</v-btn>
    <router-view/>
  </div>
</template>

<script>
export default {
  methods: {
    movetopage1(){
      window.location.href='/page/1'
    },
    movetopage2(){
      window.location.href='/page/2'
    },
  }
}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'

import VueRouter from 'vue-router'
Vue.use(VueRouter);

Vue.config.productionTip = false

import Page from './pages/page.vue'
const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/page/:id',
      component: Page,
    },
  ],
});

new Vue({
  vuetify,
  render: h => h(App),
  router
}).$mount('#app')

• 다음과 같이 page.vue 하나만 import 시켜주면서 routes의 path에 params 속성을 넣어줌

pages/page.vue

<template>
  <div>
    {{ $route.params.id }} 페이지 입니다
  </div>
</template>

• main.js에서 보낼때 params 속성에 id로 넘겨주었으니 받을때 $route.params.id 로 받음
• 만약 query 속성으로 보낸다면 main.js의 path에서 /:id를 빼주고 App.vue에서 window.location.href=/page?id=1 이런식으로 보내주고 page.vue에서 $route.query로 받으면 됨

결과