NuxtJS - Định tuyến trong Nuxt.js

2023-11-20 10:48:43 NuxtJS Học Lập Trình JavaScrip 31 lượt xem 0 bình luận

Trong bài viết này, chúng ta sẽ tìm hiểu cách định tuyến hoạt động trong NuxtJs. Nuxt.js là một khung ứng dụng web mã nguồn mở và miễn phí dựa trên Vue.js, Node.js, Webpack và Babel.js. Nuxt được lấy cảm hứng từ Next.js, một framework có mục đích tương tự, dựa trên React.js.

**Tạo ứng dụng NuxtJS:**

**Bước 1:** Bạn có thể tạo dự án Nuxt.js mới bằng lệnh bên dưới:

```
npx create-nuxt-app gfg
```

**Bước 2:** Bây giờ hãy điều hướng đến ứng dụng của bạn bằng lệnh sau:

```
cd gfg
```

**Cấu trúc dự án:** Nó sẽ trông như thế này.

![](/images/2023/3/11/23-1700698877-nuxtjs.png)

**Định tuyến (Routes):** Trong các framework như Nuxt.js, Next.js và React.js, chúng ta thường có nhiều hơn một trang. Vì vậy, chúng ta cần một bộ định tuyến để điều hướng giữa các trang khác nhau của ứng dụng. Quá trình thêm bộ định tuyến vào ứng dụng để điều hướng giữa các trang được gọi là định tuyến (routes).

**Các tuyến tự động:** Trong các ứng dụng Vue, chúng ta phải tạo và thêm các tuyến khác nhau trong tệp cấu hình, bộ định tuyến theo cách thủ công. Nhưng trong Nuxt.js, bạn không phải tạo tệp cấu hình định tuyến theo cách thủ công. Nó tự động tạo cấu hình ```vue-router``` và thêm mọi đường dẫn của ứng dụng vào tệp. Bất cứ khi nào bạn tạo một trang mới, đường dẫn của trang đó sẽ tự động được thêm vào tệp cấu hình.

**Ví dụ:** Hãy tạo một trang mới có tên ```gfg.vue``` với nội dung bên dưới:

*gfg.vue*

```javascript
<template> 
	<div> 
	<h3>This is the GFG Page.</h3> 
	</div> 
</template>
```

*index.vue*

```javascript
<template> 
	<div> 
	<h3>This is the Home Page.</h3> 
	</div> 
</template>
```

**Khởi động ứng dụng:** Sử dụng lệnh dưới đây để khởi động ứng dụng.

```
npm run dev
```

**Đầu ra:**

![](/images/2023/3/11/23-1700698878-reactrouterfinal.gif)

**Điều hướng (Navigation):** Chúng ta có thể thêm điều hướng trong ứng dụng Nuxt.js bằng thành phần NuxtLink. Bạn không cần nhập (import) thành phần này vào tệp của mình.

**Ví dụ:** Hãy thay đổi nội dung của ```gfg.vue``` với nội dung bên dưới:

*gfg.vue*

```javascript
<template> 
	<div> 
	<h3>This is the GFG Page.</h3> 
	<NuxtLink to="/"> 
		Go to HomePage 
	</NuxtLink> 
	</div> 
</template>
```

*index.vue*

```javascript
<template> 
	<div> 
	<h3>This is the Home Page.</h3> 
	<NuxtLink to="/gfg"> 
		Go to GFG Page 
	</NuxtLink> 
	</div> 
</template>
```

**Khởi động ứng dụng:** Sử dụng lệnh dưới đây để khởi động ứng dụng.

```
npm run dev
```

**Đầu ra:**

![](/images/2023/3/11/23-1700698878-reactrouterf.gif)

------

***Mục lục:***

[- Thẻ Meta trong Nuxt.js](/learn/detail?learnId=28)

[- Các lệnh Nuxt.js](/learn/detail?learnId=29)

[- Định tuyến trong Nuxt.js](/learn/detail?learnId=30)

[- Triển khai Nuxt.js](/learn/detail?learnId=31)

Sau khi bạn nắm vững căn bản của mình giới thiệu, bạn có thể vào các trang này để tiềm hiểu nâng cao

[- Nuxt 2 - Tutorials](https://v2.nuxt.com/tutorials/)

[- Nuxt 3 - Tutorials](https://nuxt.com/docs/getting-started/installation)

- Tổng hợp và hướng dẫn về System Admin,
Server, Cloud, Docker, Monitor.
- Hướng dẫn lập trình Backend, Website.
- Hướng dẫn lập trình App Android & IOS.
- Hướng dẫn lập trình Games.
- Học từ vựng và luyện kỷ năng ngoại ngữ.