Xin chào các bạn. Hôm nay mình sẽ giới thiệu với các bạn về một framework mới đó là Nuxtjs. Cụ thể mình sẽ giới thiệu với các bạn
về Routing của NuxtJs.
Giới thiệu qua 1 chút về Nuxt.js
. Nó là một framework sử dụng để xây dựng các ứng dụ từ Vue.js
.Nuxt.js
được ra đời vào 25/10/2016 bởi zeit.co. Nếu ai đã tưng làm việc với Reactjs
rồi chắc sẽ biết đến Next.js
thì thằng Nuxt.js
này cũng gần tương tự như thế.
Giờ mình bắt đầu vào vào phần giới thiệu chính về Routing nhé.
Các Routes cơ bản
Đường dẫn file:
1 2 3 4 5 6 | pages/ --| user/ -----| index.vue -----| one.vue --| index.vue |
Nó sẽ tự động tạo ra Router:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | router<span class="token punctuation">:</span> <span class="token punctuation">{</span> routes<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token single-quoted-string string">'index'</span><span class="token punctuation">,</span> path<span class="token punctuation">:</span> <span class="token single-quoted-string string">'/'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> <span class="token single-quoted-string string">'pages/index.vue'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token single-quoted-string string">'user'</span><span class="token punctuation">,</span> path<span class="token punctuation">:</span> <span class="token single-quoted-string string">'/user'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> <span class="token single-quoted-string string">'pages/user/index.vue'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token single-quoted-string string">'user-one'</span><span class="token punctuation">,</span> path<span class="token punctuation">:</span> <span class="token single-quoted-string string">'/user/one'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> <span class="token single-quoted-string string">'pages/user/one.vue'</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> |
Các Routes lồng nhau
Nuxt.js cho phép bạn tạo các route lồng nhau bằng cách sử dụng các route con của vue-router.
Để xác định thành phần cha của các route lồng nhau, bạn cần tạo file Vue có cùng tên với thư mục chứa các contain con.
Đường dẫn file:
1 2 3 4 5 6 | pages/ --| users/ -----| _id.vue -----| index.vue --| users.vue |
Nó sẽ tự động tạo ra Router:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | router<span class="token punctuation">:</span> <span class="token punctuation">{</span> routes<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token single-quoted-string string">'/users'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> <span class="token single-quoted-string string">'pages/users.vue'</span><span class="token punctuation">,</span> children<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token single-quoted-string string">''</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> <span class="token single-quoted-string string">'pages/users/index.vue'</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token single-quoted-string string">'users'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token single-quoted-string string">':id'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> <span class="token single-quoted-string string">'pages/users/_id.vue'</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token single-quoted-string string">'users-id'</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> |
Named Views
Để hiển thị các chế độ xem được đặt tên, bạn có thể sử dụng các thành phần <nuxt name="top"/>
hoặc <nuxt-child name="top"/>
trong bố cục / trang của bạn. Để chỉ định chế độ xem được đặt tên của trang, cần mở rộng cấu hình bộ định tuyến trong file nuxt.config.js
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | export <span class="token keyword">default</span> <span class="token punctuation">{</span> router<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token function">extendRoutes</span><span class="token punctuation">(</span>routes<span class="token punctuation">,</span> resolve<span class="token punctuation">)</span> <span class="token punctuation">{</span> let index <span class="token operator">=</span> routes<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span>route <span class="token operator">=</span><span class="token operator">></span> route<span class="token punctuation">.</span>name <span class="token operator">===</span> <span class="token single-quoted-string string">'main'</span><span class="token punctuation">)</span> routes<span class="token punctuation">[</span>index<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>routes<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">,</span> components<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token keyword">default</span><span class="token punctuation">:</span> routes<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>component<span class="token punctuation">,</span> top<span class="token punctuation">:</span> <span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token single-quoted-string string">'components/mainTop.vue'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> chunkNames<span class="token punctuation">:</span> <span class="token punctuation">{</span> top<span class="token punctuation">:</span> <span class="token single-quoted-string string">'components/mainTop'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Nó đòi hỏi cần phải mở rộng router với 2 thuộc tính components
và chunkNames
.
Để có thể hiểu cụ thể hơn, hãy xem ví dụ về named-view.
Dự phòng SPA
Các bạn cũng có thể bật dự phòng SPA cho các route. Nuxt.js sẽ xuất ra một file bổ sung giống như index.html
sẽ được sử dụng trong mode: 'spa'
. Hầu hết các dịch vụ lưu trữ có thể được cấu hình để sử dụng SPA nếu không có tệp nào khớp. Nó sẽ không bao gồm head
thông tin hoặc bất kỳ HTML nào, nhưng nó vẫn sẽ giải quyết và tải dữ liệu từ API.
Có thể kích hoạt tính năng này trong file nuxt.config.js
:
1 2 3 4 5 6 7 | export <span class="token keyword">default</span> <span class="token punctuation">{</span> generate<span class="token punctuation">:</span> <span class="token punctuation">{</span> fallback<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// if you want to use '404.html' instead of the default '200.html'</span> fallback<span class="token punctuation">:</span> <span class="token single-quoted-string string">'my-fallback/file.html'</span> <span class="token comment">// if your hosting needs a custom location</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Thực hiện cho Surge
Surge có thể xử lý . cả 200.html
và 404.html. generate.fallback
thành 200.html` mặc định, vì vậy sẽ không cần phải thay đổi nó.
Triển khai cho các trang GitHub và Netlify
Trang GitHub và Netlify tự động nhận ra file 404.html
, do đó những gì chúng ta phải làm là chỉ cần thiết lập generate.fallback
thành true
.
Triển khai cho Firebase Hosting.
Để sử dụng dự phòng trên Firebase Hosting, cần cấu hình generate.fallback
thành true
và sử dụng cấu hình sau (để biết thêm chi tiết ):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token punctuation">{</span> <span class="token double-quoted-string string">"hosting"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token double-quoted-string string">"public"</span><span class="token punctuation">:</span> <span class="token double-quoted-string string">"dist"</span><span class="token punctuation">,</span> <span class="token double-quoted-string string">"ignore"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token double-quoted-string string">"firebase.json"</span><span class="token punctuation">,</span> <span class="token double-quoted-string string">"**/.*"</span><span class="token punctuation">,</span> <span class="token double-quoted-string string">"**/node_modules/**"</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token double-quoted-string string">"rewrites"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token double-quoted-string string">"source"</span><span class="token punctuation">:</span> <span class="token double-quoted-string string">"**"</span><span class="token punctuation">,</span> <span class="token double-quoted-string string">"destination"</span><span class="token punctuation">:</span> <span class="token double-quoted-string string">"/404.html"</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Chuyển tiếp
Nuxt.js sử dụng thành phần <transition> để cho phép tạo các hiệu ứng chuyển tiếp / hình ảnh động giữa các route của mình.
Thiết lập chung
Để thêm chuyển tiếp mờ dần cho mỗi trang trong ứng dụng của bạn, cần một file CSS được chia sẻ trên tất cả các route , vì vậy cần bắt đầu bằng cách tạo một file trong thư mục assets .
css được viết trong assets/main.css
:
1 2 3 4 5 6 7 | <span class="token punctuation">.</span>page<span class="token operator">-</span>enter<span class="token operator">-</span>active<span class="token punctuation">,</span> <span class="token punctuation">.</span>page<span class="token operator">-</span>leave<span class="token operator">-</span>active <span class="token punctuation">{</span> transition<span class="token punctuation">:</span> opacity <span class="token number">.5</span>s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">.</span>page<span class="token operator">-</span>enter<span class="token punctuation">,</span> <span class="token punctuation">.</span>page<span class="token operator">-</span>leave<span class="token operator">-</span>to <span class="token punctuation">{</span> opacity<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Sau đó, chúng ta thêm đường dẫn của nó vào css
trong file nuxt.config.js:
1 2 3 4 5 6 | export <span class="token keyword">default</span> <span class="token punctuation">{</span> css<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'~/assets/main.css'</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> |
Cài đặt trang
Bạn cũng có thể xác định chuyển đổi tùy chỉnh cho một trang cụ thể với thuộc tính transition
.
Chúng ta thêm một class mới và viết css trong assets/main.css
:
1 2 3 4 5 6 7 | <span class="token punctuation">.</span>test<span class="token operator">-</span>enter<span class="token operator">-</span>active<span class="token punctuation">,</span> <span class="token punctuation">.</span>test<span class="token operator">-</span>leave<span class="token operator">-</span>active <span class="token punctuation">{</span> transition<span class="token punctuation">:</span> opacity <span class="token number">.5</span>s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">.</span>test<span class="token operator">-</span>enter<span class="token punctuation">,</span> <span class="token punctuation">.</span>test<span class="token operator">-</span>leave<span class="token operator">-</span>active <span class="token punctuation">{</span> opacity<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Sau đó, chúng ta sẽ sử dụng thuộc tính chuyển đổi để xác định tên class sẽ sử dụng cho quá trình chuyển đổi trang này:
1 2 3 4 | export <span class="token keyword">default</span> <span class="token punctuation">{</span> transition<span class="token punctuation">:</span> <span class="token single-quoted-string string">'test'</span> <span class="token punctuation">}</span> |
Middleware
Mỗi Middleware nên được đặt trong thư mục middleware/
. Tên file sẽ là tên của Middleware ( middleware/auth.js
).
1 2 3 4 | export <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token punctuation">{</span> context<span class="token punctuation">.</span>userAgent <span class="token operator">=</span> process<span class="token punctuation">.</span>server <span class="token operator">?</span> context<span class="token punctuation">.</span>req<span class="token punctuation">.</span>headers<span class="token punctuation">[</span><span class="token single-quoted-string string">'user-agent'</span><span class="token punctuation">]</span> <span class="token punctuation">:</span> navigator<span class="token punctuation">.</span>userAgent <span class="token punctuation">}</span> |
Middleware sẽ được thực hiện theo thứ tự:
nuxt.config.js
(theo thứ tự trong file)- Layouts phù hợp
- Trang phù hợp
Một middleware có thể không đồng bộ. Để thực hiện việc này, chỉ cần trả về một Promise
hoặc sử dụng callback
gọi lại lần 2:
middleware/stats.js
1 2 3 4 5 6 7 8 | import axios from <span class="token single-quoted-string string">'axios'</span> export <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> route <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> axios<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'http://my-stats-api.com'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> url<span class="token punctuation">:</span> route<span class="token punctuation">.</span>fullPath <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> |
Sau đó, trong nuxt.config.js
, sử dụng khóa router.middleware
:
nuxt.config.js
1 2 3 4 5 6 | export <span class="token keyword">default</span> <span class="token punctuation">{</span> router<span class="token punctuation">:</span> <span class="token punctuation">{</span> middleware<span class="token punctuation">:</span> <span class="token single-quoted-string string">'stats'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Bây giờ status
của middleware sẽ được gọi cho mỗi thay đổi của route.
Bạn cũng có thể thêm middleware của mình vào một layout hoặc trang cụ thể :
pages/index.vue
hoặc layouts/default.vue
1 2 3 4 | export <span class="token keyword">default</span> <span class="token punctuation">{</span> middleware<span class="token punctuation">:</span> <span class="token single-quoted-string string">'stats'</span> <span class="token punctuation">}</span> |
Dưới đây mình đã giới thiệu với các bạn về Nuxt.js cũng như các khái niệm cơ bản và ví dụ về Routing trong Nuxt.js n. Nếu có bất kì thắc mắc gì hãy để lại comment ở phía dưới nhé.