除了使用 <router-link> 建立 a 標籤來定義導航連結,我們還可以藉助 router 的例項方法,通過編寫程式碼來實現。
router.push(location)
想要導航到不同的 URL,則使用 router.push 方法。這個方法會向 history 棧新增一個新的記錄,所以,當使用者點選瀏覽器後退按鈕時,則回到之前的 URL。
當你點選 <router-link> 時,這個方法會在內部呼叫,所以說,點選 <router-link :to="..."> 等同於呼叫 router.push(...)。
宣告式 <router-link :to="...">
程式設計式 router.push(...)
該方法的引數可以是一個字串路徑,或者一個描述地址的物件。例如:
// 字串
router.push('home')
// 物件
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢引數,變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
router.replace(location)
跟 router.push 很像,唯一的不同就是,它不會向 history 新增新記錄,而是跟它的方法名一樣 —— 替換掉當前的 history 記錄。
宣告式 <router-link :to="..." replace> router.replace(...)
程式設計式 router.go(n)
這個方法的引數是一個整數,意思是在 history 記錄中向前或者後退多少步,類似 window.history.go(n)。
例子
// 在瀏覽器記錄中前進一步,等同於 history.forward()
router.go(1)
// 後退一步記錄,等同於 history.back()
router.go(-1)
// 前進 3 步記錄
router.go(3)
// 如果 history 記錄不夠用,那就默默地失敗唄
router.go(-100)
router.go(100)
注意
我們知道,在一般的.vue檔案中, this指向的時Vue例項,所以我們可以使用this.$router等方法。
例如,以上的router變數就需要寫成:this.$router.push("url")。
但是在store下的js檔案中,this指向的就是我們普通所說的this了,所以使用this.$router一定是會出錯的。
stackoverflow中的解決方案如下:
vuex router