Router 객체에서 /test 라는 라우트 경로를 추가하고 name을 파라미터로 받는다고 가정할 때, router.js 파일에 다음과 같이 코드를 추가합니다.
{
path: '/test/:name',
name: 'test',
component: Test
}
위 코드에 따르면, 사용자는 http://localhost/test로 접속할 수 있으며, 뒤에 name이라는 변수의 값을 파라미터로 전달할 수 있습니다. 위 라우트 경로의 이름은 test이며, 사용하는 컴포넌트는 Test입니다.
이제, 사용자가 위의 경로로 접속했을 때 파라미터를 받아서 사용하는 코드를 작성합니다.
<template>
<div>
<h2>My name is {{name}}</h2>
</div>
</template>
<script>
export default {
data(){
return {
name: 'no name'
}
},
mounted(){
this.name = this.$route.params.name
}
}
</script>
<style>
</style>
위의 컴포넌트에서 보는 바와 같이, mounted() 콜백함수가 호출되었을 때, $route라는 변수의 params라는 객체를 통해 name이라는 속성 값을 참조할 수 있습니다.
이제 서버를 실행하고 웹 브라우저에서 주소 입력창에 http://localhost/test/Tomas를 입력하면 다음과 같은 화면이 보이게 됩니다.
그런데, 만약 사용자가 Tomas와 같은 파라미터를 입력하지 않고 단지 http://localhost/test를 입력하면 다음 화면과 같이 Test.vue 컴포넌트를 표출하지 않게됩니다.
그 이유는 현재 라우트 경로를 정의할 때 반드시 파라미터로 name 변수의 값을 받도록 설정했기 때문입니다. 만약, 파라미터를 입력하지 않을 경우 My name is no name을 출력하고 싶다면 다음과 같이 별도의 라우트 경로를 정의합니다.
{
path: '/test/',
name: 'test_no_param',
component: Test
},
{
path: '/test/:name',
name: 'test',
component: Test
}
그러면, 사용자가 http://localhost/test/를 입력하면 다음과 같이 Test 컴포넌트가 정상적으로 표출되는 것을 확인할 수 있습니다.
이상입니다.
'컴퓨터 공학 > JavaScript' 카테고리의 다른 글
[초간단] Visual Studio Code에서 Vue.js 설치하기 (0) | 2019.11.14 |
---|---|
Node.js UTF-8 데이터 CSV 파일 저장시 한글 깨짐 문제 (0) | 2019.11.14 |
Node.js에서 C/C++ 애드온 N-API, 빠르게 시작하기 (0) | 2019.11.14 |
Electron-vue 관련 링크 모음 (1) | 2019.04.12 |
[단순코드] Node.js 로거 모듈 winston/winston-daily-rotate-file 초기화 (0) | 2019.04.06 |