Yêu cầu thg 5 27, 2020 9:36 SA 231 0 2
  • 231 0 2
0

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

Chia sẻ
  • 231 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 CÂU TRẢ LỜI


Đã trả lời thg 5 27, 2020 9:57 SA
Đã được chấp nhận
+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.
Chia sẻ
Avatar TAMIX @tuananhbfs
thg 5 28, 2020 1:12 SA

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

thg 5 30, 2020 7:52 SA

@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

Đã trả lời thg 5 27, 2020 9:37 SA
+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>
Chia sẻ
Avatar TAMIX @tuananhbfs
thg 5 27, 2020 9:40 SA

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

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí