2019-10-20 seo達人
什么是編程式的導航
除了使用 <router-link> 創建 a 標簽來定義導航鏈接，我們還可以借助 router 的實例方法，通過編寫代碼來實現。
router.push(location, onComplete?, onAbort?)
注意：在 Vue 實例內部，你可以通過 $router 訪問路由實例。因此你可以調用 this.$router.push。
想要導航到不同的 URL，則使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄，所以，當用戶點擊瀏覽器后退按鈕時，則回到之前的 URL。
HTML代碼
<p @click="$router.push('/test/emitView')">跳轉1</p>
<p @click="$router.push({path: '/test/propsView'})">path: '/test/propsView'</p>
<p @click="test">帶參數的跳轉</p>
<p @click="test1">提供了path，params會被忽略</p>
<p @click="$router.push({path: /test/propsView/${userId}})">
url變為/test/propsView/123
</p>
<p @click="$router.push({path: '/test/propsView', query: {plan: 'private'}})">
帶參數的url變為/test/propsView?plan=private
</p>
Script中代碼
test () {
this.$router.push({
name: 'routerView',
params: {userId: this.userId, test: 333},
})
console.log(this.$route)
console.log(this.$route.params)
},
test1 () {
this.$router.push({ // 如果提供了 path，params 會被忽略
path: 'routerView',
params: {userId: this.userId, test: 333},
})
console.log(this.$route)
console.log(this.$route.params)
},
router.replace(location, onComplete?, onAbort?)
跟 router.push 很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄。
router.go(n)
// 在瀏覽器記錄中前進一步，等同于 history.forward()
router.go(1)
// 后退一步記錄，等同于 history.back()
router.go(-1)
// 如果 history 記錄不夠用，則無反應
router.go(-100)
router.go(100)
router.back()
在瀏覽器記錄中后退一步
router.forward()
在瀏覽器記錄中前進一步
藍藍設計( www.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。