Chào mừng đến với Cafedev! Trong bài viết này, chúng ta sẽ cùng tìm hiểu về Vuejs with Routing – một phần quan trọng trong việc phát triển ứng dụng web với Vue.js. Routing là một khía cạnh không thể thiếu khi xây dựng các ứng dụng đơn trang (SPA), giúp quản lý các tuyến đường qua lại giữa các trang và hiển thị nội dung phù hợp cho người dùng. Hãy cùng khám phá cách Vuejs xử lý định tuyến trên phía client và cách sử dụng Vue Router để tạo các ứng dụng web mạnh mẽ và linh hoạt!
Nội dung chính
1. Routing Trên Client-Side và Server-Side
Routing trên server-side có nghĩa là máy chủ gửi phản hồi dựa trên đường dẫn URL mà người dùng đang truy cập. Khi chúng ta nhấp vào một liên kết trong một ứng dụng web truyền thống được render bởi máy chủ, trình duyệt nhận phản hồi HTML từ máy chủ và tải lại toàn bộ trang với HTML mới.
Trong một Single-Page Application (SPA), tuy nhiên, JavaScript phía client có thể chặn điều hướng, động dữ liệu mới và cập nhật trang hiện tại mà không cần tải lại toàn bộ trang. Điều này thường dẫn đến trải nghiệm người dùng nhanh chóng hơn, đặc biệt là cho các trường hợp sử dụng giống như ứng dụng thực sự, nơi người dùng được mong đợi thực hiện nhiều tương tác trong một khoảng thời gian dài.
Trong các SPA như vậy, “định tuyến” được thực hiện trên phía client, trong trình duyệt. Một router phía client chịu trách nhiệm quản lý chế độ xem được hiển thị của ứng dụng bằng cách sử dụng các API trình duyệt như History API hoặc sự kiện hashchange.
2. Router Chính Thức từ Vuejs
Vue rất phù hợp cho việc xây dựng các SPA. Đối với hầu hết các SPA, khuyến nghị sử dụng thư viện Vue Router được hỗ trợ chính thức từ vuejs. Để biết thêm chi tiết, xem tài liệu của Vue Router tại Series này.
3. Định Tuyến Đơn Giản Từ Đầu
Nếu bạn chỉ cần định tuyến rất đơn giản và không muốn sử dụng một thư viện router đầy đủ tính năng, bạn có thể làm điều đó với Các Thành Phần Linh Động và cập nhật trạng thái thành phần hiện tại bằng cách lắng nghe các sự kiện hashchange của trình duyệt hoặc sử dụng History API.
Dưới đây là một ví dụ cơ bản theo kiểu composition:
<script setup>
import { ref, computed } from 'vue'
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'
const routes = {
'/': Home,
'/about': About
}
const currentPath = ref(window.location.hash)
window.addEventListener('hashchange', () => {
currentPath.value = window.location.hash
})
const currentView = computed(() => {
return routes[currentPath.value.slice(1) || '/'] || NotFound
})
</script>
<template>
<a href="#/">Home</a> |
<a href="#/about">About</a> |
<a href="#/non-existent-path">Broken Link</a>
<component :is="currentView" />
</template>Theo kiểu Option.
<script>
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'
const routes = {
'/': Home,
'/about': About
}
export default {
data() {
return {
currentPath: window.location.hash
}
},
computed: {
currentView() {
return routes[this.currentPath.slice(1) || '/'] || NotFound
}
},
mounted() {
window.addEventListener('hashchange', () => {
this.currentPath = window.location.hash
})
}
}
</script>
<a href="#/">Home</a> |
<a href="#/about">About</a> |
<a href="#/non-existent-path">Broken Link</a>
<component :is="currentView" />Trên đây là những thông tin hữu ích về Vuejs with Routing mà chúng tôi muốn chia sẻ với bạn đọc của Cafedev. Routing là một phần quan trọng trong việc phát triển ứng dụng web với Vue.js, giúp tạo ra trải nghiệm người dùng mượt mà và linh hoạt hơn. Bằng cách sử dụng Vue Router và các kỹ thuật định tuyến phía client, bạn có thể tạo ra các ứng dụng web động, phong phú và dễ bảo trì. Hãy tiếp tục khám phá và áp dụng những kiến thức này vào dự án của mình trên 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!
