除了使用 <router-link> 創(chuàng)建 a 標(biāo)簽來定義導(dǎo)航鏈接，我們還可以借助 router 的實(shí)例方法，通過編寫代碼來實(shí)現(xiàn)。即：通過js動(dòng)態(tài)的進(jìn)行導(dǎo)航鏈接。

一、this.$router.push( )

router.push(location, onComplete?, onAbort?)

注意：在 Vue 實(shí)例內(nèi)部，你可以通過 $router 訪問路由實(shí)例。因此你可以調(diào)用 this.$router.push。

想要導(dǎo)航到不同的 URL，則使用 router.push 方法。這個(gè)方法會向 history 棧添加一個(gè)新的記錄，所以，當(dāng)用戶點(diǎn)擊瀏覽器后退按鈕時(shí)，則回到之前的 URL。

當(dāng)你點(diǎn)擊 <router-link> 時(shí)，這個(gè)方法會在內(nèi)部調(diào)用，所以說，點(diǎn)擊 <router-link :to="..."> 等同于調(diào)用 router.push(...)。

效果：

二、this.$router.replace()；用法同this.$router.replace()

router.replace(location, onComplete?, onAbort?)

跟 router.push 很像，唯一的不同就是，它不會向 history 添加新記錄(地址欄中)，而是跟它的方法名一樣 —— 替換掉當(dāng)前的 history 記錄。

三、this.$router.go()

小結(jié)：

router.push(location)

想要導(dǎo)航到不同的 URL，則使用 router.push 方法。這個(gè)方法會向 history 棧添加一個(gè)新的記錄，所以，當(dāng)用戶點(diǎn)擊瀏覽器后退按鈕時(shí)，則回到之前的 URL。

router.replace(location)

跟 router.push 很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當(dāng)前的 history 記錄。

router.go(n)

這個(gè)方法的參數(shù)是一個(gè)整數(shù)，意思是在 history 記錄中向前或者后退多少步，類似 window.history.go(n)

若有不足請多多指教！希望給您帶來幫助！

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接

最新評論