Routing trong Vuejs

Trong bài viết này chúng ta sẽ tìm hiểu cách routing đơn giản trong Vuejs và thư viện router chính thức của Vuejs các bạn nhé. Ở đây chúng mình xin phép được giữ nguyên từ router bởi vì dịch ra nó rất khiên cưỡng.

Thư viện router chính thức

Đối với đa số các ứng dụng một trang (SPA - Single Page Application), chúng tôi khuyến khích sử dụng thư viện chính thức vue-router. Để biết thêm chi tiết, hãy xem tài liệu về vue-router trên trang chủ của Vue.

Routing đơn giản

Nếu chỉ cần routing đơn giản và không muốn sử dụng một thư viện đầy đủ tính năng, chúng ta có thể render động một component ở cấp toàn trang (page-level) như sau:

const NotFound = { template: '
Không tìm thấy
' }
const Home = { template: '
Trang chủ
' }
const About = { template: '
Giới thiệu
' }


const routes = {
  '/': Home,
  '/about': About
}


new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

Bằng việc kết hợp với HTML5 History API, bạn có thể xây dựng cho mình một router phía client hoàn toàn có thể dùng được mặc dù còn rất cơ bản. Đây là một ví dụ của router dạng này.

Sử dụng router bên thứ 3

Nếu bạn muốn sử dụng một thư viện router bên thứ 3 như Page.js hoặc Director, việc tích hợp cũng dễ dàng như thế.