Trong quá trình phát triển ứng dụng Vuejs, việc mở rộng RouterLink là một phần không thể thiếu. Tại Cafedev, chúng tôi luôn khuyến khích cộng đồng phát triển tận dụng tính linh hoạt của Vue Router để tạo ra các liên kết tùy chỉnh và linh hoạt. Bài viết này sẽ giới thiệu về cách mở rộng RouterLink trong Vuejs để tạo ra các liên kết đa dạng và phong phú. Hãy cùng khám phá chi tiết qua bài viết dưới đây!
Thành phần RouterLink tiết lộ đủ props để đáp ứng đa số các ứng dụng cơ bản nhưng nó không cố gắng bao phủ mọi trường hợp sử dụng có thể và bạn có thể thấy mình sử dụng v-slot cho một số trường hợp nâng cao. Trong hầu hết các ứng dụng trung bình đến lớn, đáng giá để tạo ra ít nhất một thành phần RouterLink tùy chỉnh, nếu không phải là nhiều, để tái sử dụng chúng trong toàn bộ ứng dụng của bạn. Một số ví dụ là Liên kết trong Menu Điều Hướng, xử lý các liên kết bên ngoài, thêm một inactive-class, vv.
Hãy mở rộng RouterLink để xử lý cả các liên kết bên ngoài và thêm một inactive-class tùy chỉnh trong một tệp AppLink.vue:
code-group
[Composition API]
<script setup>
import { computed } from 'vue'
import { RouterLink } from 'vue-router'
defineOptions({
inheritAttrs: false,
})
const props = defineProps({
// add @ts-ignore if using TypeScript
...RouterLink.props,
inactiveClass: String,
})
const isExternalLink = computed(() => {
return typeof props.to === 'string' && props.to.startsWith('http')
})
</script>
<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>[Options API]
<script>
import { RouterLink } from 'vue-router'
export default {
name: 'AppLink',
inheritAttrs: false,
props: {
// add @ts-ignore if using TypeScript
...RouterLink.props,
inactiveClass: String,
},
computed: {
isExternalLink() {
return typeof this.to === 'string' && this.to.startsWith('http')
},
},
}
</script>
<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>Nếu bạn muốn sử dụng một hàm render hoặc tạo computed properties, bạn có thể sử dụng useLink từ Composition API:
import { RouterLink, useLink } from 'vue-router'
export default {
name: 'AppLink',
props: {
// add @ts-ignore if using TypeScript
...RouterLink.props,
inactiveClass: String,
},
setup(props) {
// `props` contains `to` and any other prop that can be passed to <router-link>
const { navigate, href, route, isActive, isExactActive } = useLink(props)
// profit!
return { isExternalLink }
},
}Trong thực tế, bạn có thể muốn sử dụng thành phần AppLink của bạn cho các phần khác nhau của ứng dụng của bạn. ví dụ: sử dụng Tailwind CSS, bạn có thể tạo một thành phần NavLink.vue với tất cả các lớp:
<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>Chúng tôi hy vọng rằng thông qua bài viết về cách mở rộng RouterLink trong Vuejs, bạn đã có thêm kiến thức và kỹ năng để tận dụng tính linh hoạt của Vue Router trong các dự án của mình. Tại Cafedev, chúng tôi luôn đề cao việc chia sẻ kiến thức và kinh nghiệm để cùng nhau phát triển cộng đồng phát triển. Hãy tiếp tục theo dõi và áp dụng những điều bạn học được vào thực tế để tạo ra các ứng dụng Vuejs tuyệt vời hơn. Cảm ơn bạn đã đồng hành cùng Cafedev!
Tham khảo thêm: MIỄN PHÍ 100% | Series tự học Vuejs từ cơ bản tới nâng cao
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
