Site icon Bệ Phóng Việt

Xây dựng cấu trúc điều hướng phức tạp trong VueJS với Router nâng cao

Cloud9 VN
VueJS
Advertisements

Ứng dụng web hiện đại có thể được xây dựng bằng rất nhiều framework, VueJS đang là một lựa chọn tốt cho các dự án phát triển web. Trong bài viết này, chúng ta sẽ học cách sử dụng router của VueJS để xây dựng nền tảng cho các ứng dụng web.

I. Giới thiệu

VueJS là một framework được sử dụng để phát triển các ứng dụng web tương tác. Router trong VueJS là một trong những phần quan trọng của framework, cho phép chúng ta tạo các tuyến đường tới các trang web khác nhau trong ứng dụng của mình. Trong bài viết này, chúng ta sẽ học cách sử dụng các tính năng router nâng cao của VueJS để xây dựng các cấu trúc điều hướng phức tạp.

II. Cấu hình router trong VueJS

Trước khi bắt đầu sử dụng router trong VueJS, chúng ta cần cài đặt router bằng cách sử dụng npm. Sau khi cài đặt, chúng ta cần import router và sử dụng Vue.use để đăng ký nó.

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

Sau khi đã import và đăng ký router, chúng ta cần cấu hình các tuyến đường trong ứng dụng của mình. Các tuyến đường có thể được cấu hình bằng cách sử dụng một mảng các đối tượng route, mỗi đối tượng route đại diện cho một tuyến đường trong ứng dụng của bạn.

const routes = [
{
  path: '/home',
  component: Home
},
{
  path: '/about',
  component: About
},
{
  path: '/contact',
  component: Contact
}
];

const router = new VueRouter({
  routes // short for `routes: routes`
})

Các đối tượng route bao gồm hai thuộc tính quan trọng là path và component. Thuộc tính path là một chuỗi đại diện cho đường dẫn tới trang web, còn component là một component VueJS sẽ được render khi đường dẫn được truy cập.

III. Route guards

Route guards được sử dụng để kiểm tra xem người dùng có được phép truy cập vào trang hay không. Có ba loại route guards: beforeRouteEnter, beforeRouteUpdate và beforeRouteLeave.

– beforeRouteEnter: được sử dụng để kiểm tra xem người dùng có được phép truy cập vào trang trước khi trang được render. Các giá trị có thể trả về là một Promise hoặc một hàm callback.

const router = new VueRouter({
  routes: [
  {
    path: '/protected',
    component: Protected,
    beforeEnter: (to, from, next) => {
      if (!isLoggedIn) {
      next('/login');
      } else {
      next();
      }
    }
  }
  ]
});

– beforeRouteUpdate: được sử dụng để kiểm tra xem người dùng có được phép cập nhật trang hay không khi điều hướng tới cùng một đường dẫn. Giống như trước đó, các giá trị có thể trả về là một Promise hoặc một hàm callback.

const Foo = {
  template: `...`,
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
    next()
  }
}

– beforeRouteLeave: được sử dụng để kiểm tra xem người dùng có được phép rời khỏi trang hay không khi điều hướng tới trang khác. Các giá trị có thể trả về là một Promise hoặc một hàm callback.

const Foo = {
  template: `...`,
  beforeRouteLeave (to, from, next) {
    // allow user to leave page?
    if (canLeave) {
      next()
    } else {
      next(false)
    }
  }
}

IV. Dynamic Route Matching

Dynamic Route Matching được sử dụng để xây dựng các tuyến đường có thể thay đổi khi người dùng truy cập vào ứng dụng. Các tuyến đường động được đặt theo dạng tham số trong đường dẫn, được biểu diễn bằng dấu hai chấm đôi (::).

const router = new VueRouter({
  routes: [
  {
    path: '/user/:id',
    component: UserProfile,
    props: true
  }
  ]
})

Với cấu hình trên, khi truy cập vào đường dẫn /user/123, đối tượng UserProfile sẽ được render, với một thuộc tính prop được truyền vào là id.

V. Nested routes

Nested routes được sử dụng để xác định các tuyến đường con trong một tuyến đường cha. Điều này cho phép chúng ta tạo các trang có kiểu dáng và hành động phức tạp hơn.

const router = new VueRouter({
  routes: [
  {
    path: '/nested',
    component: Nested,
    children: [
    {
      path: 'child',
      component: NestedChild
    }
    ]
  }
  ]
})

VI. Kết luận

Trong bài viết này, chúng ta đã học được cách sử dụng router của VueJS để xây dựng nền tảng cho các ứng dụng web. Chúng ta đã học cách cấu hình các tuyến đường, sử dụng route guards để kiểm tra quyền truy cập, sử dụng dynamic route matching để xây dựng các tuyến đường có thể thay đổi và sử dụng nested routes để xác định các tuyến đường con trong một tuyến đường cha.

Với những điều này, chúng ta có thể đưa những tính năng tuyệt vời này vào ứng dụng của mình để xây dựng các ứng dụng web tương tác phức tạp.

Xem Top 10 kỹ năng Vue dev nào cũng phải biết: Vuejs dev phải biết 10 kỹ năng nâng cao này nếu muốn thành senior

Exit mobile version