Vue-router là thư viện con nằm trong bộ core thư viện của Vue.js và được khuyến khích sử dụng để định tuyến cho đa số các ứng dụng một trang (SPA – Single Page Application). Hôm nay chúng ta cùng cài đặt và sử dụng thư viện hữu ích này nhé.

Cài đặt

Chắc hẳn các bạn vẫn nhớ cách set up ứng dụng Vue.js từ đầu rồi chứ. Chúng ta cũng sẽ sử dụng Vue-cli để cài đặt Vue-router.

Bước 1: khởi tạo một project mới bằng Vue-cli

Bước 2: Cửa sổ hiện ra => chọn Manually select features

Bước 3: Chọn option Router

Sau đó nhấn Enter và chọn set up tiếp theo và chờ cho Vue-cli set up nốt phần còn lại.

Sau khi quá trình cài đặt hoàn tất, chạy câu lệnh:

npm run serve

Sau đó ta truy cập http://localhost:8080/ và xem thử ứng dụng ban đầu:

Cấu trúc thư mục

Bên dưới là cấu trúc của project, trong đó:

• components: nơi chứa toàn bộ các components của app, bạn sẽ import chúng vào các trang của bạn trong views
• views: nơi chứa toàn bộ các trang con trong ứng dụng của bạn
• router: nơi config định tuyến các luồng cho ứng dụng

Config router

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

Ta có thể thêm các route vào biến routes để tạo các luồng cho ứng dụng. Vue-router sử dụng cơ chế lazy-loading, từ đó các trang khác (như trang About ở trên) chỉ thực sự load ra ngay khi có sự kiện chuyển hướng tới nó. Từ đó ứng dụng của bạn cũng thực sự nhẹ và đảm bảo hiệu suất cao!

Ta có thể sử dụng router-link để dùng sự kiện của nó để định tuyến:

<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>

Bài viết đến đây là hết. Hẹn gặp lại các bạn trong các bài viết tiếp theo.