[Vue.js] 14. vue-router, URL parameter

1. 설치

 

• npm 사용시

npm install vue-router@4

 

• yarn 사용시

yarn add vue-router@4

 

 

2. 세팅

1. src > router.js 파일 만들고 라우터 세팅하기
2. router파일 main에서 사용설정하기
3. 보여줄 곳을 <router-view>로 표시하기

 

• src > router.js 파일 만들기

// router.js
import { createWebHistory, createRouter } from 'vue-router';
import List from './components/List.vue';

const routes = [
    {
        path: '/', // 이 경로로 접속하면
        component: Home, // 이 컴포넌트를 보여줌
    },
    {
        path: '/list',
        component: List,
    },
];

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

export default router;

 

• router파일 main에서 사용설정하기

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router.js'; // 라우터 파일 import

createApp(App).use(router).mount('#app'); // 라우터 파일 사용하기

 

• 보여줄 곳을 로 표시하기

<template>
    <router-view></router-view>
    <!-- props 보내는건 똑같은 방식으로-->
    <!-- <router-view :data="data"></router-view> -->
</template>

 

 

3. 라우트 이동 링크 만들기

<template>
    <router-link to="/">Home</router-link>
    <router-link to="/list">List</router-link>
    
    <!-- 라우터 링크 내 데이터 바인딩 -->
     <div class="menu">
        <a v-for="(a, i) in menu" :key="i" href="">
            <router-link :to="{ path: '' + a.link }">{{ a.title }}</router-link>
        </a>
    </div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            menu: [
                { id: 0, title: 'Home', link: '/',},
                { id: 1, title: 'List', link: '/list',},
                { id: 2, title: 'Detail', link: '/detail',},
            ]
        };
    },
 }
</script>

 

 

4. URL 파라미터

 

• 라우트 경로 설정

// router.js

const routes = [
    ...
    {
        path: '/detail/:id', // URL 파라미터
        component: Detail,
    },
];
...

+ 파라미터 id에 정규식 문법 사용 가능

path: '/detail/:id(\\d+)', // id 뒤에 (정규식 체크)

 

 

• URL 파라미터 사용 - url 파라미터 id 불러오기

{{ $route.params.id }}

<template>
    <div>
        <h4>상세페이지</h4>
        <h5>{{ data[$route.params.id].title }}</h5>
        <p>{{ data[$route.params.id].content }}</p>
        <p>{{ data[$route.params.id].price }}원</p>
    </div>
</template>

 

+ 404 페이지

{
    path: '/:anyting(.*)', // 404 페이지
    component: Home,
},

 

 

 

5. Nested routes

: 라우트 안에 라우트 만들기

// router.js

const routes = [
    ...
    {
        path: '/detail/:id', // URL 파라미터
        component: Detail,
        children: [
            {
                path: 'seller', // /detial/:id/seller
                component: Seller,
            },
            {
                path: 'comment', ///detial/:id/comment
                component: Comment,
            },
        ],
    },
];
...

<!-- Detail.vue -->
<template>
    <div>
        <h4>상세페이지</h4>
        <h5>{{ data[$route.params.id].title }}</h5>
        <p>{{ data[$route.params.id].content }}</p>
        <p>{{ data[$route.params.id].price }}원</p>
        <router-view></router-view> <!-- router view 추가 -->
    </div>
</template>

 

6. 라우팅 관련 함수

<div>
    <p @click="$router.push('/detail/' + data.id)">상세페이지 이동</p>
    <!-- $router.go(1): 앞으로가기 -->
    <!-- $router.go(-1): 뒤로가기 -->
</div>

❗ $route - 현재경로 / $router - 페이지 이동관련 기능