VueJS - Điều hướng: Hướng dẫn cơ bản cho người mới bắt đầu trong việc Điều hướng ứng dụng Vue của bạn

Xin chào các bạn, những nhà vô địch Vue tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị qua thế giới của Vue routing. Hãy tưởng tượng routing như GPS của ứng dụng Vue của bạn - nó giúp người dùng của bạn điều hướng từ một trang đến trang khác mà không cần tải lại toàn bộ trang web. Đ酷, phải không? Hãy cùng nhau khám phá!

Vue Routing là gì?

Hãy tưởng tượng bạn đang xây dựng một ngôi nhà (ứng dụng Vue của bạn). Bạn không muốn khách của mình phải vào qua cửa sổ mỗi khi họ muốn đi đến một phòng khác, phải không? Đó là lúc routing ra vào - nó giống như tạo ra những cửa đi giữa các phòng của ứng dụng bạn.

Vue Router là thư viện điều hướng chính thức cho Vue.js. Nó cho phép bạn ánh xạ các thành phần đến các đường dẫn URL khác nhau, tạo ra một trải nghiệm ứng dụng trang đơn mượt mà.

Cài đặt Vue Router

Trước tiên, hãy cài đặt Vue Router. Mở terminal của bạn và chạy lệnh:

npm install vue-router

Bây giờ, hãy tạo một cấu hình router cơ bản:

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]

const router = new VueRouter({
routes
})

export default router

Trong cấu hình này, chúng ta đang nhập Vue và VueRouter, sau đó cho Vue biết sử dụng VueRouter. Chúng ta xác định các route trong một mảng, nơi mỗi route là một đối tượng chỉ định đường dẫn, tên và thành phần để render.

Sử dụng Router-Link và Router-View

Bây giờ chúng ta đã thiết lập xong route, làm thế nào để sử dụng chúng? Hãy gặp <router-link> và <router-view>.

Router-Link

<router-link> là một thành phần cho phép người dùng điều hướng giữa các trang. Nó giống như một thẻ <a> được tăng cường. Dưới đây là cách bạn sử dụng nó:

<template>
<div id="app">
<nav>
<router-link to="/">Trang chủ</router-link> |
<router-link to="/about">Về chúng tôi</router-link>
</nav>
<router-view/>
</div>
</template>

Router-View

<router-view> là nơi xảy ra phép màu. Nó là một thành phần hiển thị nội dung của route khớp với URL hiện tại. Hãy tưởng tượng nó như một placeholder nơi các thành phần của bạn sẽ được render.

Props cho Router-Link

Router-Link đi kèm với nhiều props để bạn tùy chỉnh hành vi của nó. Hãy xem xét một số phổ biến nhất:

Prop	Mô tả	Ví dụ
to	Chỉ định route đích	<router-link to="/about">Về chúng tôi</router-link>
replace	Điều hướng mà không đẩy một mục lịch sử mới	<router-link to="/about" replace>Về chúng tôi</router-link>
append	Thêm đường dẫn vào đường dẫn hiện tại	<router-link to="child" append>Child</router-link>
tag	Chỉ định thẻ để render thành phần	<router-link to="/about" tag="li">Về chúng tôi</router-link>
active-class	Lớp áp dụng khi liên kết đang hoạt động	<router-link to="/about" active-class="active">Về chúng tôi</router-link>
exact	Khớp chính xác route	<router-link to="/" exact>Trang chủ</router-link>

Điều hướng chương trình

Đôi khi, bạn có thể muốn điều hướng từ bên trong mã JavaScript của bạn. Vue Router cung cấp các phương thức cho điều này:

// Đi đến trang Về chúng tôi
this.$router.push('/about')

// Quay lại
this.$router.go(-1)

// Thay thế mục lịch sử hiện tại
this.$router.replace('/about')

Khớp route động

Thường xuyên, chúng ta cần ánh xạ route với cùng một thành phần nhưng với các tham số khác nhau. Ví dụ, một trang hồ sơ người dùng nơi ID người dùng là một phần của URL. Chúng ta có thể đạt được điều này với các segment động trong đường dẫn:

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

Trong ví dụ này, :id là segment động. Bạn có thể truy cập nó trong thành phần của bạn qua this.$route.params.id.

Route con

Khi ứng dụng của bạn phát triển, bạn có thể muốn nhúng các thành phần vào nhau. Vue Router làm điều này dễ dàng:

const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]
})

Cấu hình này cho phép các URL như /user/123/profile và /user/123/posts.

Bảo vệ route

Cuối cùng, hãy nói về các guard điều hướng. Đây là các hooks do Vue Router cung cấp để bảo vệ các điều hướng hoặc bằng cách chuyển hướng hoặc hủy bỏ. Chúng giống như các bảo vệ của ứng dụng bạn, kiểm soát ai được vào và ai không được vào.

Dưới đây là một ví dụ đơn giản về một guard trước toàn cục:

router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
else next()
})

Guard này kiểm tra xem người dùng đã xác thực hay chưa trước khi cho phép điều hướng đến bất kỳ route nào khác ngoài 'Login'.

Và thế là xong, các bạn! Chúng ta đã cùng nhau đi qua các khái niệm cơ bản của Vue routing, từ việc thiết lập route đến việc bảo vệ chúng. Nhớ rằng, thực hành là cách tốt nhất để thành thạo, vì vậy đừng ngần ngại thử nghiệm các khái niệm này trong các dự án của riêng bạn. Chúc các bạn may mắn và mong rằng các route của bạn luôn dẫn bạn đến nơi bạn muốn đến!

Credits: Image by storyset