Việc sử dụng Vue Router cùng với Composition API đã mở ra nhiều khả năng mới cho các nhà phát triển. Tại Cafedev, chúng tôi sẽ hướng dẫn bạn cách kết hợp hai công cụ mạnh mẽ này để tối ưu hóa ứng dụng Vuejs của bạn. Bài viết này sẽ giúp bạn hiểu rõ cách truy cập Router và Route trong `setup`, cũng như cách sử dụng các bộ bảo vệ điều hướng và `useLink`. Hãy cùng khám phá chi tiết qua bài viết dưới đây!
Việc giới thiệu Composition API của Vue đã mở ra nhiều khả năng mới, nhưng để có thể tận dụng tối đa Vue Router, chúng ta cần sử dụng một vài hàm mới để thay thế việc truy cập this và các bộ bảo vệ điều hướng trong thành phần.
Nội dung chính
1. Truy cập Router và Route hiện tại bên trong setup
Vì chúng ta không có quyền truy cập this bên trong setup, chúng ta không thể trực tiếp truy cập this.$router hoặc this.$route. Thay vào đó, chúng ta sử dụng các hàm composable useRouter và useRoute:
<script setup>
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
function pushWithQuery(query) {
router.push({
name: 'search',
query: {
...route.query,
...query,
},
})
}
</script>Đối tượng route là một đối tượng phản ứng. Trong hầu hết các trường hợp, bạn nên tránh theo dõi toàn bộ đối tượng route. Thay vào đó, bạn có thể trực tiếp theo dõi các thuộc tính mà bạn dự kiến sẽ thay đổi:
<script setup>
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'
const route = useRoute()
const userData = ref()
// fetch the user information when params change
watch(
() => route.params.id,
async newId => {
userData.value = await fetchUser(newId)
}
)
</script>Lưu ý rằng chúng ta vẫn có quyền truy cập $router và $route trong các mẫu, vì vậy không cần phải sử dụng useRouter hoặc useRoute nếu chúng ta chỉ cần các đối tượng đó trong mẫu.
2. Bộ bảo vệ điều hướng
Vue Router cung cấp các bộ bảo vệ cập nhật và rời khỏi dưới dạng các hàm của Composition API:
<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
import { ref } from 'vue'
// same as beforeRouteLeave option but with no access to `this`
onBeforeRouteLeave((to, from) => {
const answer = window.confirm(
'Do you really want to leave? you have unsaved changes!'
)
// cancel the navigation and stay on the same page
if (!answer) return false
})
const userData = ref()
// same as beforeRouteUpdate option but with no access to `this`
onBeforeRouteUpdate(async (to, from) => {
// only fetch the user if the id changed as maybe only the query or the hash changed
if (to.params.id !== from.params.id) {
userData.value = await fetchUser(to.params.id)
}
})
</script>Các bộ bảo vệ của Composition API cũng có thể được sử dụng trong bất kỳ thành phần nào được hiển thị bởi , không cần phải sử dụng trực tiếp trên thành phần tuyến đường như các bộ bảo vệ trong thành phần.
3. useLink
Vue Router cung cấp hành vi nội bộ của RouterLink dưới dạng một composable. Nó chấp nhận một đối tượng phản ứng như các thuộc tính của RouterLink và cung cấp các thuộc tính cấp thấp để xây dựng thành phần RouterLink của riêng bạn hoặc tạo các liên kết tùy chỉnh:
<script setup>
import { RouterLink, useLink } from 'vue-router'
import { computed } from 'vue'
const props = defineProps({
// add @ts-ignore if using TypeScript
...RouterLink.props,
inactiveClass: String,
})
const {
// the resolved route object
route,
// the href to use in a link
href,
// boolean ref indicating if the link is active
isActive,
// boolean ref indicating if the link is exactly active
isExactActive,
// function to navigate to the link
navigate
} = useLink(props)
const isExternalLink = computed(
() => typeof props.to === 'string' && props.to.startsWith('http')
)
</script>Lưu ý rằng v-slot của RouterLink cung cấp quyền truy cập vào các thuộc tính tương tự như composable useLink.
Qua bài viết này, hy vọng bạn đã nắm được cách sử dụng Vue Router kết hợp với Composition API để tạo ra các ứng dụng Vuejs linh hoạt và hiệu quả hơn. Những kỹ thuật này sẽ giúp bạn tận dụng tối đa các tính năng mạnh mẽ của Vuejs. Nếu có bất kỳ câu hỏi hoặc thắc mắc nào, hãy liên hệ với Cafedev để được hỗ trợ. Cảm ơn bạn đã theo dõi và chúc bạn thành công trong quá trình phát triển ứng dụng!
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!
