Chào mừng bạn đến với Cafedev – nơi chia sẻ kiến thức và kinh nghiệm về công nghệ! Trong bài viết này, chúng ta sẽ khám phá về Router Vuejs với các chế độ lịch sử khác nhau. Vue Router là một phần quan trọng trong phát triển ứng dụng Vuejs, và việc hiểu rõ về các chế độ lịch sử sẽ giúp chúng ta tối ưu hóa trải nghiệm người dùng và quản lý tình trạng địa chỉ URL một cách linh hoạt nhất. Hãy cùng nhau tìm hiểu và áp dụng những kỹ thuật này vào dự án của bạn!
Tùy chọn history khi tạo ra một instance router cho phép chúng ta chọn giữa các chế độ lịch sử khác nhau.
Nội dung chính
1. Chế độ Hash
Chế độ lịch sử hash được tạo ra với createWebHashHistory():
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes: [
//...
],
})Nó sử dụng một ký tự hash (#) trước URL thực tế được truyền nội bộ. Vì phần này của URL không bao giờ được gửi đến máy chủ, nó không đòi hỏi bất kỳ xử lý đặc biệt nào ở mức độ máy chủ. Tuy nhiên, nó ảnh hưởng xấu đến SEO. Nếu đó là một vấn đề đối với bạn, hãy sử dụng chế độ lịch sử HTML5.
2. Chế độ HTML5
Chế độ HTML5 được tạo ra với createWebHistory() và là chế độ được khuyến nghị:
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
//...
],
})Khi sử dụng createWebHistory(), URL sẽ trông “bình thường,” ví dụ https://example.com/user/id. Đẹp đẽ!
Tuy nhiên, đây là một vấn đề: Vì ứng dụng của chúng ta là một ứng dụng trang duy nhất trên phía máy khách, mà không có cấu hình máy chủ phù hợp, người dùng sẽ nhận được lỗi 404 nếu họ truy cập trực tiếp https://example.com/user/id trong trình duyệt của họ. Như vậy là không đẹp đẽ.
Đừng lo lắng: Để khắc phục vấn đề, bạn chỉ cần thêm một tuyến đường phụ bắt đầu cho tất cả vào máy chủ của bạn. Nếu URL không phù hợp với bất kỳ tài nguyên tĩnh nào, nó sẽ phục vụ trang index.html giống như ứng dụng của bạn. Đẹp đẽ, một lần nữa!
3. Chế độ Bộ Nhớ
Chế độ lịch sử bộ nhớ không giả định một môi trường trình duyệt và do đó không tương tác với URL cũng không tự động kích hoạt điều hướng ban đầu. Điều này làm cho nó hoàn hảo cho môi trường Node và SSR. Nó được tạo ra với createMemoryHistory() và yêu cầu bạn nhấn điều hướng ban đầu sau khi gọi app.use(router).
import { createRouter, createMemoryHistory } from 'vue-router'
const router = createRouter({
history: createMemoryHistory(),
routes: [
//...
],
})Mặc dù không được khuyến nghị, bạn có thể sử dụng chế độ này trong các ứng dụng Trình duyệt nhưng lưu ý sẽ không có lịch sử, có nghĩa là bạn sẽ không thể đi trở lại hoặc tiến lên.
4. Các Cấu Hình Mẫu
Lưu ý: Các ví dụ dưới đây giả định bạn đang phục vụ ứng dụng của mình từ thư mục gốc. Nếu bạn triển khai vào một thư mục con, bạn nên sử dụng tùy chọn publicPath của Vue CLI> và thuộc tính base của router. Bạn cũng cần điều chỉnh các ví dụ dưới đây để sử dụng thư mục con thay vì thư mục gốc (ví dụ: thay thế RewriteBase / bằng RewriteBase /tên-thư-mục-con-của-bạn/).
Apache
Options -MultiViews
RewriteEngine OnRewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L]
Thay vì mod_rewrite, bạn cũng có thể sử dụng FallbackResource.
nginx
nginx location / { try_files $uri $uri/ /index.html; }
Native Node.js
const http = require('http')
const fs = require('fs')
const httpPort = 80
http
.createServer((req, res) => {
fs.readFile('index.html', 'utf-8', (err, content) => {
if (err) {
console.log('We cannot open "index.html" file.')
}
res.writeHead(200, {
'Content-Type': 'text/html; charset=utf-8',
})
res.end(content)
})
})
.listen(httpPort, () => {
console.log('Server listening on: http://localhost:%s', httpPort)
})Express với Node.js
Đối với Node.js/Express, xem xét sử dụng middleware connect-history-api-fallback.
Internet Information Services (IIS)
- Cài đặt IIS UrlRewrite 2. Tạo một tệp
web.configtrong thư mục gốc của trang web của bạn với nội dung sau:xml
Caddy v2
try_files {path} /
Caddy v1
rewrite { regexp .* to {path} / }
Firebase hosting
Thêm vào firebase.json của bạn:
on
{
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}Netlify
Tạo một tệp _redirects được bao gồm với các tệp đã triển khai của bạn:/* /index.html 200
Trong các dự án vue-cli, nuxt, và vite, tập tin này thường được đặt trong một thư mục có tên là static hoặc public.
Bạn có thể đọc thêm về cú pháp tại tài liệu Netlify. Bạn cũng có thể tạo một tập tin netlify.toml để kết hợp điều hướng với các tính năng khác của Netlify.
Vercel
Tạo một tập tin vercel.json dưới thư mục gốc của dự án của bạn với nội dung sau:
on
{
"rewrites": [{ "source": "/:path*", "destination": "/index.html" }]
}5. Lưu ý
Có một lưu ý về điều này: Máy chủ của bạn sẽ không báo cáo lỗi 404 nữa vì tất cả các đường dẫn không tìm thấy hiện giờ đều phục vụ tập tin index.html của bạn. Để vượt qua vấn đề này, bạn nên triển khai một đường dẫn catch-all trong ứng dụng Vue của bạn để hiển thị trang 404:
const router = createRouter({
history: createWebHistory(),
routes: [{ path: '/:pathMatch(.*)', component: NotFoundComponent }],
})Hoặc nếu bạn đang sử dụng một máy chủ Node.js, bạn có thể triển khai phần phụ thuộc bằng cách sử dụng bộ định tuyến trên phía máy chủ để phù hợp với URL đang đến và phản hồi với mã 404 nếu không có đường dẫn nào phù hợp. Xem tài liệu Vue về phía máy chủ để biết thêm thông tin.
Cảm ơn bạn đã đọc bài viết của chúng tôi trên Cafedev về Router Vuejs với các chế độ lịch sử khác nhau. Hy vọng rằng thông tin mà chúng tôi chia sẻ đã giúp bạn hiểu rõ hơn về cách tối ưu hóa việc quản lý địa chỉ URL trong ứng dụng Vuejs của mình. Hãy áp dụng những kiến thức này vào dự án của bạn và tiếp tục theo dõi Cafedev để cập nhật thêm nhiều bài viết hữu ích khác. Cảm ơn bạn đã đồng hành cùng Cafedev!
Tham khảo thêm: MIỄN PHÍ 100% | Series tự học Vuejs từ cơ bản tới nâng cao
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
