Vue.js에서 라우터 URI에 파라미터 전달하기

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를 입력하면 다음과 같은 화면이 보이게 됩니다.

test 화면

그런데, 만약 사용자가 Tomas와 같은 파라미터를 입력하지 않고 단지 http://localhost/test를 입력하면 다음 화면과 같이 Test.vue 컴포넌트를 표출하지 않게됩니다.

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 컴포넌트가 정상적으로 표출되는 것을 확인할 수 있습니다.

파라미터가 없어도 정상적으로 표출됨

이상입니다.