[Vue.js] router 에서 url 파라미터 전달하기

 

[ router 설치 ]

npm install vue-router

 

< router 설정하기 >

 

[ /router/index.js ]

 

import { createWebHashHistory, createRouter, createWebHistory } from "vue-router";
 
const routes = [
    {
        path: "/",
        name: "main",
        component: () => import("../components/main.vue"),
    },
    {
        path: "/swiper",
        name: "swiper",
        component: () => import("../components/swiper.vue"),
    },
    {
        path: "/noticeList",
        name: "noticeList", 
        component: () => import("../components/noticeList.vue"),
 
    },
    {
        path: "/noticeView",
        name: "noticeView",
        component: () => import("../components/noticeView.vue"),
 
    }    
 
];
 
const router = createRouter({
    history: createWebHistory(),
    routes,
});
 
export default router;

 

[ App.vue ]

 

<template>
      <router-view :key='$route.fullPath'></router-view>
</template>
 
<script>
export default {
  name: 'App',
  components: {
  }
}
</script>

<router-view :key='$route.fullPath'></router-view>

위의 소스는 현재페이지 다시 로딩이나,  같은 디렉토리상의 router-link 이동시에 정상적으로 동작하도록 해준다.

 

 

[ main.js ]

 

import { createApp } from 'vue'
import App from './App.vue'
 
// router
import router from "./router";
 
createApp(App).use(router).mount('#app')
 

use(router)  하여 router 연결시킨다.

 

 

이번에는 router 를 이용하여 url 파라미터 전달하는 방식을 알아보자.

 

(1) $route.params

https://도메인/search/hello/20

 

[ router 부분 ]

 

 

(2) $route.query

https://도메인/search?text=hello&size=30

 

? 하고 보통의 Get 방식으로 파라미터를 전달하는 방식의 경우이다.

 

[ router 부분 ]

 

 

개발인생님의 포스팅글 참고하였습니다.

 https://hello-bryan.tistory.com/274

[Vue] route 에서 url parameter 받아오기