Làm cách nào để sử dụng router trong VueJS để scroll đến section hoạt động?
Em đang xây dựng 1 trang web sử dụng Vue và có các component được tách riêng ra từng file.
Vấn đề là em đang muốn khi nhấn vào link menu thì nó sẽ scroll đến cái div em muốn tuy nhiên em đã đặt cho các thẻ div(section) các #id tuy nhiên khi em sử dụng thẻ a href hc router-link để nó scroll đến thì nó không hoạt động! em cũng đã thử đặt các event nhưng cũng không ổn.... Mong được các anh chị, các cao nhân chỉ giáo ạ!
<div class="list-nav-item">
<li>
<router-link tag="a" class="nav-link rttr" to="/" exact >
Trang chủ
</router-link>
</li>
<li class="nav-item">
<!-- <a href="#contact" class="nav-link"></a> -->
<router-link tag="a" class="nav-link rttr" to="#about" >
Về chúng tôi
</router-link>
</li>
<li class="nav-item"> <router-link tag="a" class="nav-link rttr" to="#Newspaper" @click.prevent="scrollTo('#Newspaper')">
Tin tức
</router-link></li>
<li class="nav-item"> <router-link class="nav-link rttr" :to="'/recruit' && '/recruit/vi'" >
Tuyển dụng
</router-link></li>
<li class="nav-item">
<router-link class="nav-link rttr" to="#contact" >
Liên hệ
<a href="#contact"></a>
</router-link></li>
</div>
1 CÂU TRẢ LỜI
bạn cần kiểm tra lại thời điểm bạn click vào thẻ a
hoặc routerlink
thì phần section tương ứng đã được render chưa, mình thấy đôi khi bị nhầm: click vào link -> render ra section, kiểu này thì ko scroll được vì section render sau khi click, nên tại thời điểm click thì nó tìm tới id(#) của section thì chưa có.
Thường để làm điều như bạn muốn thì ta đơn giản là dùng thẻ a
thôi ko cần tới router-link
nhé
Thanks a Đức dz hỗ trợ iem... e đã thử sử dụng cả thẻ a, để scroll-behavior: smooth; ở app rồi nhưng vẫn không đc ạ, không biết hay là do e để thuộc tính over-flow hiden nên nó k bay đến hay thuộc tính nào khắc chế nó đi không ạ? Em cảm ơn a
Với lại e còn dùng router link để làm cái menu active ấy a ạ ._.
Èo hoá ra là do cái router link thiệc ạ hix e xài thẻ a lại đc rồi nhưng e muốn làm active luôn nên xài router-link
@binchanhkun99 e vẫn dùng thẻ a và bind cái class active vào cho nó cũng đc đó
@maitrungduc1410 Vâng ạ thanks a em làm dc ròi
Good