RouterLink 확장하기

Watch a free video lesson on Vue School

RouterLink 컴포넌트는 대부분의 기본 애플리케이션에 충분한 props를 제공하지만, 가능한 모든 사용 사례를 다루려 하지는 않습니다. 따라서 고급 사례에서는 v-slot을 사용하게 될 가능성이 큽니다. 중간 규모 이상 애플리케이션에서는 애플리케이션 전반에서 재사용할 수 있도록 하나 또는 여러 개의 사용자 정의 RouterLink 컴포넌트를 만드는 것이 가치가 있습니다. 예를 들면 내비게이션 메뉴의 링크, 외부 링크 처리, inactive-class 추가 등이 있습니다.

AppLink.vue 파일에서 외부 링크도 처리하고 사용자 정의 inactive-class도 추가할 수 있도록 RouterLink를 확장해 봅시다:

Composition APIOptions API

vue

<script setup>
import { computed } from 'vue'
import { RouterLink } from 'vue-router'

defineOptions({
  inheritAttrs: false,
})

const props = defineProps({
  // TypeScript를 사용 중이라면 @ts-ignore를 추가하세요
  ...RouterLink.props,
  inactiveClass: String,
})

const isExternalLink = computed(() => {
  return typeof props.to === 'string' && props.to.startsWith('http')
})
</script>

<template>
  <a v-if="isExternalLink" v-bind="$attrs" :href="to" target="_blank">
    <slot />
  </a>
  <router-link
    v-else
    v-bind="$props"
    custom
    v-slot="{ isActive, href, navigate }"
  >
    <a
      v-bind="$attrs"
      :href="href"
      @click="navigate"
      :class="isActive ? activeClass : inactiveClass"
    >
      <slot />
    </a>
  </router-link>
</template>

vue

<script>
import { RouterLink } from 'vue-router'

export default {
  name: 'AppLink',
  inheritAttrs: false,

  props: {
    // TypeScript를 사용 중이라면 @ts-ignore를 추가하세요
    ...RouterLink.props,
    inactiveClass: String,
  },

  computed: {
    isExternalLink() {
      return typeof this.to === 'string' && this.to.startsWith('http')
    },
  },
}
</script>

<template>
  <a v-if="isExternalLink" v-bind="$attrs" :href="to" target="_blank">
    <slot />
  </a>
  <router-link
    v-else
    v-bind="$props"
    custom
    v-slot="{ isActive, href, navigate }"
  >
    <a
      v-bind="$attrs"
      :href="href"
      @click="navigate"
      :class="isActive ? activeClass : inactiveClass"
    >
      <slot />
    </a>
  </router-link>
</template>

렌더 함수나 computed 속성을 만드는 방식을 선호한다면 Composition API의 useLink를 사용할 수 있습니다:

import { RouterLink, useLink } from 'vue-router'

export default {
  name: 'AppLink',

  props: {
    // TypeScript를 사용 중이라면 @ts-ignore를 추가하세요
    ...RouterLink.props,
    inactiveClass: String,
  },

  setup(props) {
    // `props`에는 `to`와 <router-link>에 전달할 수 있는 다른 prop이 들어 있습니다
    const { navigate, href, route, isActive, isExactActive } = useLink(props)

    // 준비 완료!

    return { isExternalLink }
  },
}

실제로는 애플리케이션의 여러 부분에서 AppLink 컴포넌트를 사용하고 싶을 수 있습니다. 예를 들어 Tailwind CSS를 사용한다면, 모든 클래스를 포함한 NavLink.vue 컴포넌트를 만들 수 있습니다:

vue

<template>
  <AppLink
    v-bind="$attrs"
    class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out"
    active-class="border-indigo-500 text-gray-900 focus:border-indigo-700"
    inactive-class="text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:text-gray-700 focus:border-gray-300"
  >
    <slot />
  </AppLink>
</template>

RouterLink 확장하기 ​

RouterLink 확장하기