vue-router 使用a鏈接跳轉至二級子頁面偶爾會出現地址欄看不見路由和參數的情況


之前在做一個vue項目,使用vue-router進行路由跳轉,

切換頁面的時候,需要在頁面跳轉之前進行一些判斷操作,便沒有使用router-link這個標簽,而是使用了a標簽,

我的需求是,從/stastic路由跳轉至/fullView路由,然后在fullView頁面點擊返回,返回至stastic頁面

當時stastic頁面是這么寫的

<a href="#" @click="goFullView(list.id)">查看</a>
goFullView (id) {
this.$router.push({path: '/fullView',query: {id: id}})
},
項目運行之后,從一級頁面通過這個鏈接走進goFullView方法之后,
路由確實跳轉成功,可地址欄顯示卻是http://localhost:8083/#/這種,本應該是http://localhost:8083/#/fullView?id=1這種形式,(不是百分百這種情況,也有時候地址欄會正常顯示)
此時點擊二級頁面的返回按鈕,沒有返回到stastic頁面,而是返回了首頁,

解決方法:把a鏈接的href屬性去掉,或者改為href="javascript:;" 就可以了

問題就出現在a鏈接身上了,router-link標簽進行路由跳轉,其實也是使用a標簽,href屬性值指向即將要跳轉的url,如果值為#,表示不進行頁面跳轉,通常也使用這個實現回到頂部的效果,如果值為javascript:;則表示執行了一條空的js語句,地址不發生跳轉,然后執行click方法,寫法上跟javascript:void(0);一個意思,

用錯了href屬性,鬧笑話了哈哈


免責聲明!

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



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