※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다.
Vue.js의 공식 툴인 VueRouter에는 하고 싶은 이름으로 설정할 수 있는 방법이 있다. 이름을 지정하면 router-link로 링크처를 지정했을 때 루트명으로 지정하는 것이 가능해진다.
패스가 긴 경우 등, 루트명으로 한다면 가독성이 높아진다. 그러니, 보통의 패스를 지정하는 방법과 기재방법이 달라진다. 특히, URL 파라미터를 설정하고 있는 루트에 이름을 붙이는 경우는 주의가 필요하다.
이번 포스트에서는 VueRouter로 생선한 루트에 이름을 붙이는 방법에 대해서 예시를 통해서 설명하고 한자.
루트에 이름을 붙일 때의 포인트와 주의점
루트에 이름을 붙일 때의 포인트와 보통의 루트 설정과 차이점등 주요 주의점은 아래의 네 가지 이다.
- 루트 중 name 속성을 설정한다.
- router-link의 to 속성은 v-bind로 한다 (생략형의 경우는 ":"를 붙인다). (:to="")
- router-lin의 to 속성의 값 지정은 오브젝트로 하며, { name:'루트명' }으로 한다.
- URL 파라미터가 필요한 경우는 params: { 파라미터명: 값 }을 기재한다.
아래 부터는 실제 루트에 이름을 붙이는 방법에 대해 설명하도록 하겠다.
루트에 이름을 붙이고 액세스하는 방법
루트 중 name 속성을 설정한다.
VueRouter 인스턴의 routes의 내의 이름을 붙이고 싶은 패스로 하고, name 속성을 추가한다. 루트의 기재는 다음과 같다.
const router = new VueRouter({
routes: [
{
path: '/パス',
name: 'ルート名',
component: テンプレートの内容
},
]
})사례로 살펴보자면, /user이라는 패스에 "originalName" 이라는 이름을 부여하면 다음과 같이 된다.
const User = { template: '<p> 유저 페이지입니다. </p>'}
const router = new VueRouter({
routes: [
{
path: '/user',
name: 'originalName',
component: User
}
]
})또한, component는 변수 "User"로 지정한다. "User"의 내용은 위에 기재한 { template: "유저 페이지입니다" }가 들어간다.
router-link의 to 속성은 v-bind로 한다 (생략형의 경우는 ":"를 붙인다). (:to="")
다음은 작성한 이름을 붙인 루트에 액세스하기 위해, router-link 태그를 작성한다. to 속성의 값을 v-bind로 하여 (생략형의 경우는 ":"를 붙인다). 값을 오브젝트로 하여 name 속성의 값으로 루트명을 지정한다.
<router-link :to=" { name: '루트명' } ">앵커 텍스트</router-link>참고로 루트명으로 따옴표(싱글 쿼테이션)을 붙이지 않으면 변수로 판정되어 버린다는 점을 주의하자. 예시를 살펴보면 다음과 같다.
「originalName」이라는 루트명으로의 링크를 설정할 경우는 다음과 같이 된다.
<body>
<div id="app">
<!-- User컴포넌트로의 링크 -->
<router-link :to="{ name: 'originalName' } ">・UserId페에지</router-link>
<!-- 컴포넌트의 표시영역 -->
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
</body>이상으로 이름을 붙인 루트의 생성과 호출은 완료이다.
파라미터가 붙은 루트에 이름을 설정하는 방법
파라미터 붙은 루트의 경우는 파라미터 없는 경우와 router-link 태그의 기재 방법이 다르다. 파라미터 붙은 루트를 만드는 방법과 예시를 살펴보도록 하자.
루트안에 name 속성을 설정한다.
VueRouter 인스턴스의 routes안의 이름을 붙이고 싶은 패스로 하고, name 속성을 추가한다.
const router = new VueRouter({
routes: [
{
path: '/패스/:파라미터명',
name: '루트명',
component: 템플릿의 내용
},
]
})예시는 다음과 같다 두 개의 파라미터 "id"와 "name"을 가진 루트에 "userIdName"이라는 이름을 설정한다.
const UserIdName = {
template: `
<div>
<p>반갑습니다「{{ $route.params.name }}」씨！</p>
<p>당신의 유저ID는「{{ $route.params.id }}」입니다.</p>
</div>
`
}
const router = new VueRouter({
routes: [
{
path: '/user/:id/:name',
name: 'userIdName',
component: UserIdName
}
]
})또한, component는 변수 "UserIdName"으로 지정하고 있다. "UserIdName"의 내용은 VueRouter인스턴스에서 정의하고 있다.
router-link의 to 속성은 v-bind로 한다(생략형의 경우는 ":"를 붙인다).
이에서 작성한 이름이 붙인 루트에 액세스하기 위해, router-link태그를 작성한다. to 속성의 값을 v-bind로 하여 (생략형의 경우는 ":"를 붙여), 값을 오브젝트로 하여, name 속성 값으로 루트명을 지정한다.
루트에 파라미터 설정하고 있는 경우는 params 오브젝트를 추가하여 파라미터의 수만 파라미터명과 값의 셋을 기재한다.
<router-link :to="{ name: '루트명', params{ 파라미터명1: 값1, 파라미터명2: 값2,,, } }>앵커 텍스트</router-link>참고로 루트명으로 따옴표(싱글 쿼테이션)을 붙이지 않으면 변수로 판정되어 버린다는 점을 주의하자. 예시를 살펴보면 다음과 같다.
예시는 루트는 2개의 파라미터 "id"와 "name"을 가지므로, 각각을 parmas의 안에 기재한다.
<body>
<div id="app">
<!-- UserIdName컴포넌트로의 링크 -->
<router-link :to=" { name: 'userIdName', params: { id: 123, name: 'Steve' } } ">・UserId와 유저명의 페이지</router-link>
<!-- 컴포넌트의 표시영역 -->
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
</body>이상 파라미터를 가진 이름 붙은 루트를 작성과 호출에 대해 알아봤다.
참고자료
https://prograshi.com/language/vue-js/vue-router-name-the-route/
'IT > 언어' 카테고리의 다른 글
| [Java] 생성자(Constructor)의 기본과 사용법 (2) | 2023.05.13 |
|---|---|
| [Vue3] 이제는 Vuex나 Pinia를 사용하지 않아도 되지 않을까? (Composition API) (0) | 2023.05.06 |
| [Vue.js] Vue.js 이벤트 수식자 .stop과 .prevent (0) | 2023.05.03 |
| [Vue.js] <template> 태그의 몇 가지 역할 (0) | 2023.04.19 |
| [Vue.js/Vuetify] v-slot:activator="{ on, attrs }"에 대해 이해하기 (0) | 2023.04.19 |