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

一、this.$router.push( )

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

注意：在 Vue 實例內部，你可以通過 $router 訪問路由實例。因此你可以調用 this.$router.push。

想要導航到不同的 URL，則使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄，所以，當用戶點擊瀏覽器后退按鈕時，則回到之前的 URL。

當你點擊 <router-link> 時，這個方法會在內部調用，所以說，點擊 <router-link :to="..."> 等同于調用 router.push(...)。

效果：

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

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

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

三、this.$router.go()

小結：

router.push(location)

想要導航到不同的 URL，則使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄，所以，當用戶點擊瀏覽器后退按鈕時，則回到之前的 URL。

router.replace(location)

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

router.go(n)

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

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

總結

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

最新評論