Asked Aug 3rd, 2022 10:23 a.m. 103 0 1
  • 103 0 1
0

Làm cách nào để sử dụng router trong VueJS để scroll đến section hoạt động?

Share
  • 103 0 1

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 ANSWERS


Answered Aug 3rd, 2022 6:13 p.m.
Accepted
+1

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é

Share
Avatar Phạm Duy Vũ @binchanhkun99
Aug 4th, 2022 12:52 a.m.

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

0
| Reply
Share
Avatar Phạm Duy Vũ @binchanhkun99
Aug 4th, 2022 12:53 a.m.

Với lại e còn dùng router link để làm cái menu active ấy a ạ ._.

0
| Reply
Share
Avatar Phạm Duy Vũ @binchanhkun99
Aug 4th, 2022 1:23 a.m.

È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 😦

0
| Reply
Share
Avatar Mai Trung Đức @maitrungduc1410
Aug 5th, 2022 2:56 a.m.

@binchanhkun99 e vẫn dùng thẻ a và bind cái class active vào cho nó cũng đc đó 😃

0
| Reply
Share
Avatar Phạm Duy Vũ @binchanhkun99
Aug 5th, 2022 3:02 a.m.

@maitrungduc1410 Vâng ạ thanks a em làm dc ròi

0
| Reply
Share
Avatar Tuyen Nguyen @tuyen.nguyen
Aug 5th, 2022 3:16 a.m.

Good

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