vue使用 router-link 時點擊不能跳轉問題


本來一直都是使用<router-link to='/CouplePackage'>產品</router-link>這樣的靜態方法,

但是突然今天發現這個方法好像有點問題,在某些地方加了<router-link to='/CouplePackage'>產品</router-link>點擊竟然沒有反應了,

於是一直找問題,結果發現網上說可以用這樣的方法來解決:

<router-link :to="{ name: 'CouplePackage' }" >產品</router-link>的方法來解決,結果由於我用錯了,沒有效果。

后來問了朋友之后,朋友給了找出了問題:

在我加了<router-link to='/CouplePackage'>產品</router-link>標簽之后,它里面的div的父級就變成了<router-link>標簽了,因為我在div里面設置了浮動,

所以如果不給</router-link>清除浮動默認就是沒有高度的,自然點擊就沒有效果了(也許就是根本沒有點擊到了,因為沒有高度)。給<router-link>清除了浮動之后,立馬效果就有了。

 

其實在解決這個問題之前我還發現了一個可以不清楚浮動也能有效果的辦法:

<router-link :to="{path: '/CouplePackage' }">產品</router-link> 這樣是動態傳的路徑,就是不清除浮動也還是可以正常點擊的。(雖然它可以正常用,但是這樣絕對不是一個號習慣,清除浮動還是要加的)

最后,朋友給了我幾個方法:

  to="home" 第一種就是我之前常用的靜態方法 如:<router-link to='/CouplePackage'>產品</router-link>


  :to="'index'" 第二種方法其實就是通過data{return {index: 'huahuah'}}這樣的方式來返回要跳轉的路徑

 

  :to="{ path: '/home' }" 第三種方法就是上面介紹的方法了,<router-link :to="{path: '/CouplePackage' }">產品</router-link> 


  
:to="{ name: 'User'}" 第四種方法其實和第三種方法差不多,只不過一個是路徑,一個是名字,如:<router-link :to="{ name: 'CouplePackage' }" >產品</router-link>

 

在使用中發現其實使用第三種和第四種方法的可擴展性更好,並且更加不容易出錯。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM