Routing ​

Routing Phía Client và Phía Server ​

Routing phía server có nghĩa là server gửi một 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 ứng dụng web truyền thống được render bởi server, trình duyệt nhận một phản hồi HTML từ server và tải lại toàn bộ trang với HTML mới.

Tuy nhiên, trong Single-Page Application (SPA), JavaScript phía client có thể chặn điều hướng, động lực hóa việc lấy 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 linh hoạt 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 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 render 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.

Router Chính Thức ​

Vue rất thích hợp để xây dựng các SPA. Đối với hầu hết các SPA, nên sử dụng thư viện Vue Router được hỗ trợ chính thức. Để biết thêm chi tiết, xem tài liệu của Vue Router.

Đị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 Component Độ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 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:

<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="#/">Trang chủ</a> | <a href="#/about">Về chúng tôi</a> |
  <a href="#/non-existent-path">Liên kết lỗi</a>
  <component :is="currentView" />
</template>

<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('hash

change', () => {
		  this.currentPath = window.location.hash
		})
  }
}
</script>

<template>
  <a href="#/">Trang chủ</a> | <a href="#/about">Về chúng tôi</a> |
  <a href="#/non-existent-path">Liên kết lỗi</a>
  <component :is="currentView" />
</template>