Bộ định tuyến Vue, bộ định tuyến chính thức cho Vue, cho phép bạn xây dựng Ứng dụng một trang (SPA) trong Vue. Bộ định tuyến Vue cho phép bạn ánh xạ các thành phần ứng dụng web tới các tuyến trình duyệt khác nhau, quản lý ngăn xếp lịch sử của ứng dụng và định cấu hình các tùy chọn định tuyến nâng cao.
Bắt đầu với bộ định tuyến Vue
Để bắt đầu với Bộ định tuyến Vue, hãy chạy lệnh npm (Trình quản lý gói nút) sau trong thư mục ưa thích của bạn để tạo ứng dụng Vue:
npm create vue
Khi được nhắc có thêm bộ định tuyến Vue để phát triển SPA hay không, hãy chọn Có.
Sau đó mở dự án trong trình soạn thảo văn bản ưa thích của bạn. Thư mục src của ứng dụng của bạn phải chứa thư mục bộ định tuyến.
Có một tệp index.js trong thư mục bộ định tuyến chứa mã JavaScript để xử lý các tuyến đường trong ứng dụng của bạn. Tệp index.js nhập hai hàm từ gói vue-router: createRouter và createWebHistory.
Hàm createRouter tạo cấu hình tuyến đường mới từ đối tượng. Đối tượng này chứa các khóa lịch sử và lộ trình cũng như các giá trị của chúng. Khóa tuyến đường là một mảng các đối tượng mô tả chi tiết cấu hình của từng tuyến đường như trong hình trên.
Sau khi định cấu hình các tuyến đường, bạn cần xuất phiên bản bộ định tuyến này và nhập phiên bản này vào tệp main.js của mình:
import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)
app.use(router)
app.mount('#app')
Bạn đã nhập hàm bộ định tuyến vào tệp main.js của mình rồi làm cho ứng dụng Vue sử dụng hàm bộ định tuyến đó bằng phương thức use.
Sau đó, bạn có thể áp dụng các tuyến đường của mình cho ứng dụng Vue bằng cách tạo một khối mã tương tự như sau:
<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script><template>
<header>
<nav>
<RouterLink to="https://www.makeuseof.com/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</header><RouterView />
</template>
Khối mã ở trên thể hiện việc sử dụng bộ định tuyến Vue trong thành phần Vue. Đoạn mã nhập hai thành phần từ thư viện vue-router: RouterLink và RouterView.
Các thành phần RouterLink liên kết đến trang Trang chủ và Giới thiệu trong đoạn mã ở trên. Thuộc tính to chỉ định đường dẫn đến tuyến đường bạn điều hướng đến khi nhấp vào liên kết. Ở đây bạn có một liên kết trỏ đến tuyến đường chính (“/”) và liên kết thứ hai trỏ đến tuyến đường “/about”.
Thành phần này hiển thị thành phần được liên kết với tuyến đường hiện tại. Hoạt động như một trình giữ chỗ nơi nội dung của tuyến đường hiện tại sẽ được hiển thị. Khi bạn điều hướng đến một tuyến đường khác, thành phần được liên kết với tuyến đường đó sẽ được hiển thị bên trong thành phần đó.
Thêm tham số vào tuyến đường của ứng dụng của bạn
Vue Router cho phép bạn truyền tham số và truy vấn tới các tuyến đường. Tham số là phần động của URL, được biểu thị bằng dấu hai chấm ://.
Để thiết lập bộ định tuyến Vue để nó có thể nắm bắt các tham số trong các tuyến ứng dụng, hãy định cấu hình một tuyến cụ thể trong tệp index.js:
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "https://www.makeuseof.com/",
name: "home",
component: HomeView,
},
{
path: "/developer/:profileNumber",
name: "developer",
component: () => import("../views/devView.vue"),
},
],
});
Khối mã ở trên hiển thị một phiên bản bộ định tuyến với hai tuyến: nhà và phát triển. Đường dẫn nhà phát triển hiển thị thông tin về một nhà phát triển cụ thể dựa trên số hồ sơ của họ.
Bây giờ hãy sửa đổi tệp App.vue để trông giống như đoạn mã bên dưới:
<script setup>
import { ref } from "vue";
import { RouterLink, RouterView } from "vue-router";const developer = ref([
{
name: "Chinedu",
profile: 2110,
},
]);
</script><template>
<header>
<nav>
<RouterLink to="https://www.makeuseof.com/">Home</RouterLink>
<RouterLink :to="{ path: `/developer/${developer.profile}` }">
Dev Profile
</RouterLink>
</nav>
</header><RouterView />
</template>
Khối mã ở trên đặt biến nhà phát triển làm đối tượng phản ứng với hai thuộc tính: tên và hồ sơ. Thành phần RouterLink thứ hai sau đó sẽ hướng đến thành phần devView. Giờ đây, bạn có thể truy cập giá trị của tham số mà bạn chuyển tới URL trong khối mẫu hoặc khối JavaScript của thành phần devView.
Để truy cập giá trị này trong khối mẫu của thành phần devView, Vue cung cấp phương thức $route, một đối tượng chứa các thuộc tính chỉ định chi tiết thông tin URL. Thông tin này bao gồm fullPath, truy vấn, tham số và thành phần.
Dưới đây là ví dụ về cách truy cập hồ sơ của nhà phát triển cụ thể trong thành phần devView bằng phương thức $route:
<template>
<div>
<h1>This is developer {{ $route.params.profileNumber }} about page</h1>
</div>
</template>
Đoạn mã ở trên cho thấy cách sử dụng phương thức $route để truy cập và hiển thị giá trị của tham số profileNumber trong mẫu thành phần.
Thuộc tính params trong phương thức $route chứa các tham số được xác định trong tuyến. Khi Vue hiển thị thành phần này, nó sẽ thay thế giá trị $route.params.profileNumber bằng giá trị thực tế bạn chuyển vào URL.
Ví dụ: nếu bạn truy cập /developer/123, thông báo hiển thị là “Đây là nhà phát triển 123 về trang web”.
Bạn cũng có thể truy cập thông tin tuyến đường trong khối JavaScript của thành phần. Ví dụ:
<script setup>
import { useRoute } from "vue-router";const route = useRoute();
</script><template>
<div>
<h1>This is developer {{ route.params.profileNumber }} about page</h1>
</div>
</template>
Trong khối mã trước, bạn đã truy cập trực tiếp vào đối tượng $route trong mẫu để tìm nạp các tham số tuyến đường. Tuy nhiên, trong khối mã được cập nhật, bạn đã nhập hàm useRoute() từ gói vue-router. Bạn đã gán một hàm cho một biến mà sau đó bạn đã sử dụng trong mẫu thành phần Vue của mình.
Với useRoute() bạn làm theo cách tiếp cận API Vue Composition 3sử dụng hệ thống phản ứng. Điều này đảm bảo rằng thành phần được cập nhật tự động khi các tham số tuyến đường thay đổi.
Thêm truy vấn vào tuyến đường của ứng dụng của bạn
Truy vấn hoặc chuỗi truy vấn là các tham số tùy chọn được thêm vào URL sau dấu chấm hỏi “?”. Ví dụ: trong lộ trình “/search?name=vue”, “name=vue” là chuỗi truy vấn, trong đó tên là khóa và vue là giá trị.
Để thêm truy vấn vào một tuyến trong Bộ định tuyến Vue, bạn có thể sử dụng thuộc tính truy vấn của đối tượng to trong thành phần RouterLink. Thuộc tính truy vấn phải là một đối tượng trong đó mỗi cặp khóa-giá trị đại diện cho một tham số truy vấn. Đây là một ví dụ:
<RouterLink :to="{ name: 'home', query: {name: 'vue'}}">Home</RouterLink>
Sau khi thêm truy vấn vào tuyến đường của mình, bạn có thể truy cập các tham số truy vấn trong các thành phần Vue của mình. Điều này có thể được thực hiện bằng cách sử dụng đối tượng $route hoặc hàm useRoute, tương tự như thêm tham số tuyến đường.
Dưới đây là ví dụ về cách sử dụng tham số truy vấn trong một thành phần:
<template>
{{ $route.query.name }}
</template>
Đoạn mã này cho biết cách truy cập và hiển thị giá trị (tên) tham số truy vấn từ một URL bằng cách sử dụng đối tượng $route.query trong mẫu thành phần Vue.js.
Xác định trang dự phòng (404).
Bộ định tuyến Vue cho phép bạn xác định tuyến dự phòng sẽ khớp khi không có tuyến nào khác khớp với URL. Điều này rất hữu ích để hiển thị trang “404 Not Found”.
Đây là cách bạn có thể xác định tuyến dự phòng bằng bộ định tuyến Vue:
{
path:'/:pathName(.*)',
name: 'NotFound',
component: () => import('../views/NotFoundView.vue')
}
Phần /:pathname biểu thị phân đoạn động trong URL và (.*) là biểu thức chính quy JavaScript khớp với bất kỳ ký tự nào sau phân đoạn động. Điều này cho phép tuyến đường được khớp với bất kỳ tuyến đường nào.
Khi người dùng điều hướng đến một URL không khớp với bất kỳ tuyến đường nào khác, Vue sẽ hiển thị thành phần NotFoundView. Cách tiếp cận này được sử dụng để xử lý lỗi 404 hoặc hiển thị trang dự phòng khi không tìm thấy tuyến được yêu cầu.
Tìm hiểu cách tạo hoạt ảnh trong Vue
Bây giờ bạn đã biết cách thêm tham số và truy vấn vào các tuyến ứng dụng. Bạn cũng đã học cách xác định trang dự phòng để xử lý lỗi 404. Bộ định tuyến Vue cung cấp nhiều tính năng hơn như thiết lập các tuyến động và lồng nhau.
Việc thêm hoạt ảnh và chuyển tiếp giữa các thành phần trên trang web có thể cải thiện đáng kể trải nghiệm người dùng. Bạn cần tìm hiểu cách tạo hiệu ứng chuyển tiếp và hoạt ảnh trong Vue để tạo ra một trang web mượt mà hơn, sống động hơn và tổng thể tốt hơn.
