[Vue] Vue의 기초(11) - URL 파라미터, Nested routes, router push

 :파라미터

 

URL 파라미터를 만들기 위해 router의 path안에 "/detail/:id"과 같이 /:작명을 하면 된다. (그럼 /detail/0, 1, 2... 가능)

그럼 가져올 때 Detail.vue에서 {{blog[해당하는 id번호].title}} 에서 []안에 $route.params.id를 넣는다.

현재 URL 정보는 $route에 담겨있음.

$route.params는 파라미터자리에 기입된 것을 알려준다.

$route.params.id는 router의 path안에 :파라미터 작명한 것을 넣어주면 URL의 파라미터를 가져온다.

 

src/router.js

import { createWebHistory, createRouter } from "vue-router";
import List from './views/List.vue';
import Home from './views/Home.vue';
import Detail from './views/Detail.vue';

const routes = [
  {
    path: "/",
    component: Home,
  },
  {
    path: "/list",
    component: List,
  },
  {
    path: "/detail/:id",
    component: Detail,
  },
];

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

export default router; 

 

src/views/Detail.vue

<template>
  {{$route.params.id}}
  <div>
    <h4>상세페이지</h4>
    <h5>{{blog[$route.params.id].title}}</h5>
    <p>{{blog[$route.params.id].content}}</p>
    <router-view></router-view>
    <h5 @click="$router.go(-1)">뒤로가기</h5>
  </div>
</template>

<script>
export default {
  props : {
    blog : Array,
  }
}
</script>

<style>

</style>

예를 들어 URL에 localhost:8080/detail/0 을 치면 {{$route.params.id}}는 0을 가리키고

lcoalhost:8080/detail/100 을 치면 /:id 값이 100이기 때문에 100이 출력된다.

 

:파라미터() <- 소괄호 안에 정규식을 입력하면 좀더 업그레이드해서 파라미터를 사용 가능하다.

예를들어 아래와 같이 넣으면 숫자만 찾아주는 정규식 문법이다. *는 반복을 뜻하고 나머지는 vue-router 4를 참고하자.

path: "/detail/:id(\\d+)"

 

404페이지

import { createWebHistory, createRouter } from "vue-router";
import List from './views/List.vue';
import Home from './views/Home.vue';
import Detail from './views/Detail.vue';
import ErrorPage from './views/ErrorPage.vue';

const routes = [
  {
    path: "/",
    component: Home,
  },
  {
    path: "/list",
    component: List,
  },
  {
    path: "/detail/:id",
    component: Detail,
  },
  {
    path: "/:anything(.*)",
    component: ErrorPage,
  },
];

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

export default router; 

/:anything(.*) path를 가장 최하위에 두면 우선순위로 출력이 되기 때문에 잘못 입력한 경로에 대해 404 페이지를 찾을 수 없다는 화면이 나오게된다.

 

 Nested routes

 

특정 페이지 안에서 route를 나누고 싶을 때 사용한다. 예를들어 /detail/0/comment로 접속하고 싶다면 /detail/0 뒤에 children을 만들어 추가해주면 된다. 여기서 주의할 것은 children의 path에 /을 제외해서 상대경로로 적어준다.

 

src/views/Comment.vue

<template>
  댓글입니다
</template>

<script>
export default {

}
</script>

<style>

</style>

src/router.js

import { createWebHistory, createRouter } from "vue-router";
import List from './views/List.vue';
import Home from './views/Home.vue';
import Detail from './views/Detail.vue';
import Author from './views/Author.vue';
import Comment from './views/Comment.vue';

const routes = [
  {
    path: "/",
    component: Home,
  },
  {
    path: "/list",
    component: List,
  },
  {
    path: "/detail/:id",
    component: Detail,
    children: [
      {
        path: "author",
        component: Author,
      },
      {
        path: "comment",
        component: Comment,
      }
    ]
  },
  {
    path: "/:anything(.*)",
    component: Home,
  },
];

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

export default router; 

그리고 nested routes에 해당하는 것을 보여주고 싶을 때 <router-view>를 사용한다.

그럼 /detail/0/commnet로 접속하면 Detail.vue + Comment.vue가 보이는 것이다.

 

src/views/Detail.vue

<template>
  <div>
    <h4>상세페이지</h4>
    <h5>{{blog[$route.params.id].title}}</h5>
    <p>{{blog[$route.params.id].content}}</p>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  props : {
    blog : Array,
  }
}
</script>

<style>

</style>

반응형

 

 $router.push

 

$route는 현재라미터경로, $router는 페이지 이동관련 기능이다.

 

src/views/List.vue

페이지 이동시켜주는 함수 $router.push()를 사용하자.

<template>
  <div v-for="(a,i) in blog" :key="i">
      <h5 @click="$router.push('/detail/'+i)">{{blog[i].title}}</h5>
      <p>{{blog[i].date}}</p>
  </div>
</template>

<script>
export default {
    name: 'List',
    props: {
        blog : Array,
    }
}
</script>

<style>

</style>

$router.go()을 사용하면 페이지를 앞, 뒤로 움직일 수 있다. 뒤로가기는 $router.go(-1)로 구현하면 된다.

<template>
  <div>
    <h4>상세페이지</h4>
    <h5>{{blog[$route.params.id].title}}</h5>
    <p>{{blog[$route.params.id].content}}</p>
    <router-view></router-view>
    <h5 @click="$router.go(-1)">뒤로가기</h5>
  </div>
</template>

<script>
export default {
  props : {
    blog : Array,
  }
}
</script>

<style>

</style>

여러개의 컴포넌트를 보여줄 때는 named views. redirection도 가능하니 아래의 링크를 참조하자.

 

router.vuejs.org/kr/

Vue Router