Nuxtjs, thẻ <a> trong content và <a href=''#abc"
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
- Vấn đề về nuxt link. Bạn cứ thử dùng
v-html
để render ra thẻ a. Khi render bạn hook vàomounted
,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)
}
}
- 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 elementhref="#hash"
có bị gắn listener vàoonclick
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áithis
thì bạn sửa thànhthis.useNuxtRouter.bind(this)
nha.
mình "triển khai theo ý tưởng" dc rồi b. Cảm ơn b nhiều nhé.
@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
- Bạn dùng cái này thay cho thẻ
a
nhé https://nuxtjs.org/api/components-nuxt-link - Ban thử cách này nhé
<nuxt-link :to="{path: '/', hash: 'anchor'}" v-scroll-to="{el: '#anchor'}">link</nuxt-link>
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