Asked May 27th, 9:36 AM 100 0 2
  • 100 0 2
0

Nuxtjs, thẻ <a> trong content và <a href=''#abc"

Share
  • 100 0 2

Mình có 2 vấn đề xin thỉnh giáo các bạn làm Nuxtjs ạ:

1> Khi mình thêm content cho bài viết bằng v-html='', mà trong content này có chứa các thẻ link <a> nội bộ , thì làm sao chuyển nó thành route dc? Hiện tại Click các link này phải tải lại trang.

2> Cũng trong cái content này mình có các thẻ <a href="#id"> , Khi click vào nó sẽ cuộn tới id chỉ mục. Giống như viblo trong hình dưới

Vậy làm sao để khi click vào thì thanh địa chỉ trên trình duyệt cũng thay đổi theo thành abc.com/x-y-x#id dc như viblo a?

Xin cảm ơn các bạn

2 ANSWERS


Answered May 27th, 9:57 AM
Accepted
+4
  1. Vấn đề về nuxt link. Bạn cứ thử dùng v-html để render ra thẻ a. Khi render bạn hook vào mounted, beforeDestroy và triển khai theo ý tưởng sau:
const anchors = this.$el.querySelectorAll('.my-article a[href]')

_each(anchors, (anchor) => {
  anchor.addEventListener('click', this.useNuxtRouter)
})
const anchors = this.$el.querySelectorAll('.my-article a[href]')

_each(anchors, (anchor) => {
  anchor.removeEventListener('click', this.useNuxtRouter)
})
useNuxtRouter(e) {
  const path = e.getAttribute('href')
  const isNuxtSupport = path && path.startsWith('.....')

  if (isNuxtSupport) {
    e.preventDefault()
    this.$router.push(path)
  }
}
  1. Về vấn đề href="#hash" thì khi click browser tự đổi URL trên address bar luôn rồi mà bạn. Bạn thử kiểm tra xem element href="#hash" có bị gắn listener vào onclick dẫn tới event bị prevent không nhé.

Update

  • Code kia mình viết kiểu giả mã nên có thể sẽ có lỗi cú pháp, bạn tự điều chỉnh nhé.
  • Nếu this.useNuxtRouter khi chạy bị undefined cái this thì bạn sửa thành this.useNuxtRouter.bind(this) nha.
Share
Lê Tuấn Anh @tuananhbfs
May 28th, 1:12 AM

mình "triển khai theo ý tưởng" dc rồi b. Cảm ơn b nhiều nhé.

+2
| Reply
Share
May 30th, 7:52 AM

@tuananhbfs Hôm trước mình cũng code demo một cái về vấn đề này, bạn tham khảo thêm về cách mình làm nữa nhé. 😃 https://viblo.asia/p/lam-the-nao-de-su-dung-nuxt-link-trong-noi-dung-duoc-render-bang-v-html-6J3ZgzaxKmB

+1
| Reply
Share
Answered May 27th, 9:37 AM
+1
  1. Bạn dùng cái này thay cho thẻ a nhé 😄 https://nuxtjs.org/api/components-nuxt-link
  2. Ban thử cách này nhé
<nuxt-link :to="{path: '/', hash: 'anchor'}" v-scroll-to="{el: '#anchor'}">link</nuxt-link>
Share
Lê Tuấn Anh @tuananhbfs
May 27th, 9:40 AM

Thẻ a này mình ko code trực tiếp. Mà nó nằm trong 1 đoạn văn bản có sẵn. Không biết các b có hiểu ý mình diễn đạt chỗ này ko nữa

0
| Reply
Share