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