Giới thiệu
Khi phát triển các ứng dụng web với Vue.js, trừ khi bạn đang xây dựng Ứng dụng một trang (SPA), bạn sẽ muốn kết nối nhiều trang với một trang đích để cho phép người dùng điều hướng qua chúng. Điều này được gọi là định tuyến.
Định tuyến là quá trình người dùng được điều hướng đến các trang khác nhau trên một trang web. Vue.js là một khung JavaScript được sử dụng để tạo Ứng dụng Trang Đơn, có nghĩa là ứng dụng này chỉ được tải một lần từ máy chủ đến trình duyệt và trình duyệt không cần tải lại khi định tuyến; thay vào đó, nó chỉ yêu cầu các trang này và chúng được tải.
Trong hướng dẫn này, chúng ta sẽ học cách định tuyến với Vue.js và đi sâu vào các loại định tuyến khác nhau có thể được thực hiện và cách chúng có thể được thực hiện.
Bắt đầu
Định tuyến trong Vue.js được thực hiện với Bộ định tuyến Vue, hoạt động song song với thư viện Vue lõi để cho phép chúng tôi thiết lập hệ thống định tuyến. Chúng tôi muốn sử dụng vue-router trong hai tình huống trong dự án của chúng tôi. Chúng tôi muốn sử dụng bộ định tuyến trong một dự án hiện có hoặc thêm nó trong khi tạo một dự án mới.
Thiết lập bộ định tuyến Vue trong dự án hiện có
Tích hợp vue-router vào một dự án hiện tại có thể là kỹ thuật, và chúng ta sẽ xem xét các chi tiết này ngay bây giờ. Bước đầu tiên sẽ là cài đặt gói bộ định tuyến vue bằng lệnh sau:
! npm install [email protected]
Sau khi cài đặt, điều hướng đến src thư mục và tạo một thư mục có tên router, theo sau là một tệp có tên index.js trong router thư mục này sẽ đóng vai trò là tệp cấu hình bộ định tuyến của chúng tôi. Của chúng tôi src thư mục bây giờ sẽ trông như thế này:
Trong tạp chí index.js , hãy đảm bảo rằng chúng tôi dán mã bên dưới, là mã cấu hình bộ định tuyến:
import { createRouter, createWebHashHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomePage
},
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
Chúng tôi có một routes mảng có chứa một đối tượng, có thể là nhiều đối tượng trong đó mỗi đối tượng đại diện cho một tuyến đường. Hiện tại, chúng tôi chỉ tạo một cái sẽ chuyển hướng đến thành phần trang chủ.
Mỗi cái routes các đối tượng thường bao gồm path, là đường dẫn url liên quan đến gốc của trang web, name, đóng vai trò như một số nhận dạng và component, mà chúng tôi đã nhập ở đầu trang.
Ngoài mảng định tuyến, chúng tôi thiết lập phiên bản bộ định tuyến ở dưới cùng bằng cách tạo createRouter() chức năng và truyền vào history các giá trị quan trọng và routes mảng, và sau đó chúng tôi xuất router ví dụ để sử dụng trong ứng dụng của chúng tôi.
Để sử dụng cấu hình bộ định tuyến này trong ứng dụng của chúng tôi, hãy mở main.js tập tin trong src thư mục, import router from "./router", và sau đó thêm .use(router) giữa createApp(App) và .mount('#app') giống như nó ở bên dưới:
import router from './router'
createApp(App).use(router).mount('#app')
T vue-router đã được định cấu hình toàn cầu trong ứng dụng của chúng tôi và bước tiếp theo là sử dụng nó trong ứng dụng của chúng tôi. Điều này có thể dễ dàng thực hiện bằng cách bao gồm <router-view /> trong App.js thẻ mẫu, chỉ hiển thị tuyến đường phù hợp:
<!--App.vue -->
<template>
<router-view />
</template>
<script>
export default {
name: 'App',
}
</script>
Thiết lập các tuyến đường trong Vue.js
Các tuyến đường thường được tạo trong router/index.js mảng các tuyến của tệp và các tuyến này kết nối với các thành phần. Một thực tiễn tốt là tạo một thư mục dạng xem nơi tất cả các dạng xem trang sẽ được lưu trữ. Ví dụ:
Tại thời điểm này, chúng tôi đã biết cách thiết lập các tuyến đường theo cách thủ công.
Lưu ý: Tất cả những điều này sẽ được thực hiện cho chúng tôi nếu chúng tôi sử dụng vue-cli để cài đặt vue-router khi tạo dự án của chúng tôi.
Cài đặt bộ định tuyến Vue với Vue CLI
Nếu chúng tôi sắp tạo một dự án mới và tin rằng chúng tôi sẽ sử dụng vue-router, làm như vậy sẽ dễ dàng hơn trong khi tạo dự án.
Tất cả những gì chúng ta phải làm là sử dụng Vue CLI để cài đặt phiên bản mới nhất của vue-router trong khi chọn thủ công các tính năng trong quá trình tạo dự án của chúng tôi:
Đọc và tìm hiểu thêm về cách tạo dự án Vue.js thông qua Hướng dẫn về Vue CLI!
Các tuyến đường tải lười biếng với bộ định tuyến Vue
Khi ứng dụng của chúng tôi tăng kích thước, kích thước gói cũng tăng lên, khiến trang web của chúng tôi tải lâu hơn. Chúng ta có thể sử dụng vue-router triển khai tải chậm để tránh tải một số tuyến đường cụ thể cho đến khi người dùng yêu cầu cụ thể.
Điều này thường được thực hiện trong tệp cấu hình bộ định tuyến bằng cách xóa import ở trên cùng và thay thế nó bằng một câu lệnh nhập động trong tùy chọn thành phần của tuyến đường của chúng tôi:
import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [
{
path: '/',
name: 'home',
component: () =>
import( '../views/HomePage.vue'),
},
{
path: '/about',
name: 'about',
component: () =>
import( '../views/AboutPage.vue'),
},
];
const router = createRouter({
history: createWebHashHistory(),
routes,
});
export default router;
Điều hướng giữa các tuyến đường với
Cho đến nay, chúng tôi đã có thể tạo các tuyến đường, nhưng làm cách nào để chúng tôi điều hướng trong ứng dụng của mình? Chúng tôi sử dụng <router-link> thẻ thay vì <a> phần tử trong HTML để xử lý định tuyến.
Ví dụ: nếu chúng tôi muốn tạo một thanh điều hướng ở đầu ứng dụng của mình, chúng tôi có thể thực hiện việc này trong App.js tập tin phía trên <router-view/> thẻ để nó hiển thị trên tất cả các tuyến đường:
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
Liên kết bộ định tuyến chấp nhận to='path' thuộc tính đưa người dùng đến đường dẫn của thành phần như đã đặt khi định cấu hình đường dẫn. Điều này hoạt động giống như href='path``' thuộc tính trong HTML.
Sử dụng các tuyến đường được đặt tên
Sử dụng các tuyến đường đã đặt tên cho phép chúng tôi vượt qua name khóa có quyền truy cập vào name thuộc tính mà chúng tôi đặt trong khi định cấu hình các tuyến thay vì sử dụng đường dẫn bằng cách liên kết dữ liệu theo cách này:
Xem hướng dẫn thực hành, thực tế của chúng tôi để học Git, với các phương pháp hay nhất, các tiêu chuẩn được ngành công nghiệp chấp nhận và bảng lừa đảo đi kèm. Dừng lệnh Googling Git và thực sự học nó!
<router-link :to="{ name: 'About' }">About</router-link>
Một lợi thế của việc sử dụng phương pháp này là trong trường hợp chúng tôi quyết định thay đổi đường dẫn đường dẫn cho các ứng dụng lớn của mình, chúng ta không cần phải bắt đầu thay đổi tất cả đường dẫn liên kết có thể phức tạp.
Định tuyến động
Các tình huống có thể phát sinh yêu cầu sử dụng định tuyến động để tránh lặp lại trang không cần thiết. Ví dụ: giả sử chúng ta có một danh sách các loại trái cây và chúng tôi muốn người dùng có thể nhấp vào một loại trái cây cụ thể và chỉ thông tin chi tiết về loại trái cây đó được hiển thị trên trang chi tiết về trái cây. Trong trường hợp này, chúng tôi sử dụng định tuyến động.
Chúng tôi sẽ có hai trang - một trang để giới thiệu các loại trái cây trong danh sách và một trang để hiển thị chi tiết của từng loại trái cây, đó là trang “bản thiết kế” để điền các chi tiết của trái cây. Chúng tôi sẽ tạo các trang trong thư mục Vue và sau đó thêm các tuyến đường vào routes mảng:
import FruitsPage from '../views/FruitsPage.vue';
import FruitDetails from '../views/FruitDetails.vue';
const routes = [
{
path: '/fruits',
name: 'Fruits',
component: FruitsPage,
},
{
path: '/fruits/:id',
name: 'FruitDetails',
component: FruitDetails,
},
];
Chúng tôi sẽ nhận thấy rằng FruitDetails trang, chúng tôi đã thêm một động id tài sản để nó có được id và sử dụng nó để truy vấn dữ liệu cụ thể hiển thị trên trang đó bằng cách sử dụng $route.params trong mẫu của chúng tôi, do đó làm cho tuyến đường động.
Trong tạp chí FruitsPage, giả sử chúng ta có một mảng các loại quả mà chúng ta lặp vào ứng dụng của mình, chúng ta có thể bọc mỗi quả bằng một liên kết cùng với các tham số theo cách này:
<!-- FruitsPage.vue -->
<template>
<h1>Fruits page</h1>
<div :key="fruit.id" v-for="fruit in fruits">
// dynamic linking by attaching the id as params
<router-link :to="{ name: 'FruitDetails', params: { id: fruit.id } }">
<h3>{{ fruit.name }}</h3>
</router-link>
</div>
</template>
<script>
export default {
data() {
return {
fruits: [
{
id: 1,
name: 'Apple',
description:
"Apples are an incredibly nutritious fruit.",
},
{
id: 2,
name: 'Mango',
description:
'A mango is an edible stone fruit produced by the tropical.',
},
{
id: 3,
name: 'Banana',
description:
'A banana is an elongated, edible fruit of the genus Musa.',
},
],
};
},
};
</script>
Tại thời điểm này, khi người dùng nhấp vào từng trái cây, nó sẽ đưa họ đến FruitDetails trang nơi chúng tôi có thể truy cập id và sử dụng nó để xác định các chi tiết của trái cây cần được hiển thị trong FruitDetails .
Truy cập các thông số tuyến đường
Cho đến nay, chúng ta đã thấy cách truyền động các tham số đến một trang cụ thể, bây giờ hãy xem cách chúng ta có thể truy cập thông số đó trong FruitDetails trang. Có hai cách để chúng ta có thể truy cập các tham số trong Vue - thông qua $route.params hoặc sử dụng các đạo cụ:
Sử dụng $ route.params
Các thông số có thể truy cập trực tiếp qua $route.params:
<template>
<h1>Fruit Details</h1>
<p>This is fruit with the id of {{ $route.params.id }}</p>
</template>
Hoặc chúng tôi có thể truy cập nó trong data() phương pháp sử dụng this:
<template>
<h1>Fruit Details</h1>
<p>This is fruit with the id of {{ id }}</p>
</template>
<script>
export default {
data() {
return {
id: this.$route.params.id,
};
},
};
</script>
Sử dụng Vue Props
Một phương pháp dễ dàng khác để truy cập dữ liệu động qua các tuyến đường là sử dụng đạo cụ. Đầu tiên chúng ta phải thiết lập props đến true trong đối tượng cấu hình các tuyến đường:
{
path: '/fruits/:id',
name: 'FruitDetails',
component: FruitDetails,
props: true,
},
Bằng cách này, tất cả những gì chúng ta phải làm tiếp theo là thêm props tùy chọn cho script và sau đó sử dụng các đạo cụ trong template nhãn:
<template>
<h1>Fruit Details</h1>
<p>This is fruit with the id of {{ id }}</p>
</template>
<script>
export default {
props: ['id'],
};
</script>
404 lỗi - Không tìm thấy tuyến đường
Trong trường hợp người dùng điều hướng đến một tuyến không tồn tại, Vue sẽ tải trang nhưng không có bất kỳ thành phần nào, tạo ra một trang trống. Trong trường hợp này, điều tốt nhất nên làm là hiển thị trang 404 có lẽ là một nút dẫn họ đến trang chủ hoặc bất cứ nơi nào chúng tôi tin rằng họ muốn đến.
Điều này có thể dễ dàng xử lý bằng cách tạo một thành phần cho trang 404 của chúng tôi và sau đó thêm một tuyến đường 404 vào mảng các tuyến đường của tệp cấu hình bộ định tuyến của chúng tôi, nhưng lần này chúng tôi sẽ sử dụng một biểu thức chính quy để bắt tất cả các tuyến đường chưa được khai báo trước đó:
{
path: '/:catchAll(.*)',
name: 'ErrorPage',
component: ErrorPage,
}
Sản phẩm :catchAll là phân đoạn động nhận một biểu thức chính quy của (.*) trong đó Bộ định tuyến Vue sử dụng để kiểm tra xem tuyến đường mà người dùng điều hướng đến có được xác định trong tệp cấu hình bộ định tuyến của chúng tôi hay không. Nếu các tuyến như vậy không tồn tại, người dùng sẽ được chuyển hướng đến thành phần, trong trường hợp của chúng tôi là ErrorPage thành phần:
<template>
<h2>404 Page</h2>
<p>This is a 404 page</p>
<p>Visit home page <router-link to="/">here</router-link></p>
</template>
← liên kết
Trong tình huống mà chúng tôi muốn người dùng được chuyển hướng khi họ truy cập một tuyến đường cụ thể, chẳng hạn như nếu chúng tôi có một tuyến đường cũ mà chúng tôi không còn sử dụng nữa, chúng tôi muốn người dùng được chuyển hướng đến tuyến đường mới khi họ truy cập tuyến đường đó. Điều này có thể dễ dàng thực hiện bằng cách thêm một đối tượng mới vào mảng cấu hình các tuyến đường của chúng tôi, với redirect cánh đồng:
{
path: '/fruits',
name: 'Fruits',
component: FruitsPage,
},
{
path: '/all-frults',
redirect: '/fruits',
},
Tất cả những gì đoạn mã trên thực hiện là nếu người dùng truy cập, đường dẫn /all-fruits, nó sẽ chuyển hướng họ đến /fruits tuyến đường.
Điều hướng có lập trình
Cho đến nay, chúng tôi đã học được rất nhiều về định tuyến, nhưng có một điều nữa bạn sẽ muốn biết: cách thực hiện điều hướng có lập trình. Chúng tôi định nghĩa điều hướng có lập trình là tình huống trong đó người dùng được chuyển hướng / chuyển hướng dựa trên một hành động cụ thể xảy ra trên một tuyến đường, chẳng hạn như hành động đăng nhập hoặc đăng ký hoặc bằng cách nhấp vào một nút cụ thể, chẳng hạn như nút “quay lại”.
Lịch sử bộ định tuyến
Chúng tôi có thể sử dụng lịch sử trình duyệt để dễ dàng điều hướng ngược hoặc chuyển tiếp, tùy thuộc vào sở thích của chúng tôi. Nếu bạn nhớ lại, chúng tôi có một createRouter() trong tệp cấu hình bộ định tuyến nơi chúng tôi đặt history giá trị, cho phép bộ định tuyến Vue theo dõi lịch sử bộ định tuyến của chúng tôi khi chúng tôi định tuyến qua ứng dụng web.
Điều này cho phép chúng tôi xem qua lịch sử của trình duyệt, dựa trên một điều kiện, chẳng hạn như một lần nhấp vào nút:
<template>
<h1>Fruit Details</h1>
<p>This is fruit with the id of {{ id }}</p>
<button @click="goBack">Go Back</button>
</template>
<script>
export default {
props: ['id'],
methods:{
goBack(){
this.$router.go(-1)
}
}
};
</script>
Chúng tôi cũng có thể quyết định đi tiếp bằng cách sử dụng 1 thay vì -1 và giả sử chúng ta muốn di chuyển bằng 2 bước, chúng ta có thể sử dụng 2 or -2.
Đẩy
push() thường được sử dụng sau khi một hành động đã xảy ra và thêm một mục mới vào ngăn xếp lịch sử. Ví dụ: nếu người dùng đăng nhập thành công, chúng tôi muốn được điều hướng đến trang bảng điều khiển theo chương trình. Điều này được thực hiện bằng cách bao gồm phương thức đẩy cùng với tên của tuyến đường:
this.$router.push({ name: 'Dashboard' });
Lưu ý: Chúng tôi phải đảm bảo rằng tuyến được khai báo trong tệp cấu hình bộ định tuyến của chúng tôi, nếu không nó sẽ không hoạt động và sẽ chuyển hướng chúng tôi đến trang 404.
Kết luận
Định tuyến là một trong những chức năng cốt lõi của Vue. Trừ khi bạn đang xây dựng một Ứng dụng một trang (SPA), bạn sẽ muốn kết nối nhiều trang với một trang đích để cho phép người dùng điều hướng qua chúng.
Trong hướng dẫn này, chúng tôi đã xem xét định tuyến là gì, cách bạn có thể cài đặt vue-router trong các dự án mới và hiện có, cách thực hiện tải chậm, điều hướng giữa các tuyến đường, thực hiện định tuyến động, truy cập các thông số tuyến đường và điều hướng theo chương trình peform.
