Asked Oct 27th, 2020 5:22 PM 125 0 2
  • 125 0 2
+1

Hỏi về cách xử lý router trong nuxtjs

Share
  • 125 0 2

Chào mọi người. Mình đang muốn xử lý trang đọc bài viết chi tiết như kiểu này: 9to5mac-daily-october-27-2020

Khi kéo xuống đọc hết bài thì sẽ hiện ra các bài gợi ý như hình này:

Click vào button EXPAND FULL STORY để đọc tiếp bài mới. Khi đó nó thay đổi url slug rồi hiển thị tiếp content bài mới trong cùng 1 trang luôn. Thì sẽ xử lý trong nuxtjs như thế nào? Mình cảm ơn

2 ANSWERS


Answered Oct 29th, 2020 1:02 AM
Accepted
0

@bacode Bên nhớ không nhầm thì vue-router ko có shallow giống bên next.js. Việc dùng $router.replace như ở dưới mình chia sẻ mà không được thì bạn thử dùng cách này xem:

window.history.pushState(
  null,
  null,
  `/new-url`
)
Share
Answered Oct 28th, 2020 1:31 AM
+2

Mình giả định là khi click nút EXPAND FULL STORY thì bạn sẽ lấy full nội dung của bài viết đó qua API, hoặc bằng một cách nào đó khác sau đó hiển thị nội dung full này thay thế đoạn nội dung ngắn. Lúc này bạn đang cần đổi cái URL nữa thôi. Trường hợp này bạn thử dùng hàm replace có lẽ là phù hợp, khi đó nội dung trang vẫn giữ nguyên được và URL sẽ thay đổi:

this.$router.replace()

https://router.vuejs.org/guide/essentials/navigation.html#router-replace-location-oncomplete-onabort

Share
Oct 28th, 2020 2:26 AM

@huukimit replace() thì cách thức hoạt động cũng giống router push mà nhỉ b? Như thế thì nó sẽ chuyển url rồi chạy cái asyncData và thay thế nội dung cũ rồi mà nhỉ?

0
| Reply
Share
Oct 28th, 2020 2:27 AM

@huukimit mình thấy bên next có cái shallow routing có thể làm đc. Bên nuxt ko biết có cái nào tương tự thế ko?

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.