Vue路由跳轉(zhuǎn)方式的區(qū)別是什么

今天小編給大家分享一下Vue路由跳轉(zhuǎn)方式的區(qū)別是什么的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

在瀏覽器中，點(diǎn)擊鏈接實(shí)現(xiàn)導(dǎo)航的方式，叫做聲明式導(dǎo)航。例如：普通網(wǎng)頁(yè)中點(diǎn)擊 a標(biāo)簽鏈接。vue項(xiàng)目中點(diǎn)擊router-link標(biāo)簽鏈接都屬于聲明式導(dǎo)航。
在瀏覽器中，調(diào)用API方法實(shí)現(xiàn)導(dǎo)航的方式，叫做編程式導(dǎo)航。例如：普通網(wǎng)頁(yè)中調(diào)用location.href跳轉(zhuǎn)到新頁(yè)面的方式，屬于編程式導(dǎo)航。vue項(xiàng)目中編程式導(dǎo)航有this.$router.push(),this.$router.replace(),this.$router.go()。

聲明式導(dǎo)航router-link

1. 不帶參數(shù)

<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> 
// name,path都行, 建議用name  
// 注意：router-link中鏈接如果是'/'開始就是從根路由開始，如果開始不帶'/'，則從當(dāng)前路由開始。

2.帶參數(shù)

<router-link :to="{name:'home', params: {id:1}}">  
 
// params傳參數(shù) (類似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id" 
// 不配置path ,第一次可請(qǐng)求,刷新頁(yè)面id會(huì)消失
// 配置path,刷新頁(yè)面id會(huì)保留
 
// html 取參  $route.params.id
// script 取參  this.$route.params.id
 
 
<router-link :to="{name:'home', query: {id:1}}"> 
 
// query傳參數(shù) (類似get,url后面會(huì)顯示參數(shù))
// 路由可不配置
 
// html 取參  $route.query.id
// script 取參  this.$route.query.id

編程式導(dǎo)航

1、this.$router.push

跳轉(zhuǎn)到指定url路徑，并想history棧中添加一個(gè)記錄，點(diǎn)擊后退會(huì)返回到上一個(gè)頁(yè)面

在這里插入代碼片// 字符串
this.$router.push('index') 

// 對(duì)象
this.$router.push({path: 'login-pw'})

// 帶參數(shù)
this.$router.push({path: 'login-pw', query: {'account': this.account.account}})

// 跳轉(zhuǎn)后的頁(yè)面獲取參數(shù)
this.account.account = this.$route.query.account

2、this.$router.replace

1.跳轉(zhuǎn)到指定的URL，替換history棧中最后一個(gè)記錄，點(diǎn)擊后退會(huì)返回至上一個(gè)頁(yè)面。（A----->B----->C 結(jié)果B被C替換 A----->C）
2.設(shè)置replace屬性（默認(rèn)值：false）的話，當(dāng)點(diǎn)擊時(shí)，會(huì)調(diào)用router.replace()，而不是router.push()，于是導(dǎo)航后不會(huì)留下history記錄。
3.即使點(diǎn)擊返回按鈕也不會(huì)回到這個(gè)頁(yè)面。加上replace: true時(shí)，它不會(huì)向 history 添加新紀(jì)錄，而是跟它的方法名一樣——替換當(dāng)前的history記錄。

// 聲明式
<reouter-link :to="..." replace></router-link>
// 編程式：
router.replace(...)
// push方法也可以傳replace
this.$router.push({path: '/homo', replace: true})

this.$router.replace({
    name: this.pageFrom,
    params: this.formData
})

onConfirm: () => {
  this.$router.replace('/TravelManage')
}

3、this.$router.go(n)

1.向前或者向后跳轉(zhuǎn)n個(gè)頁(yè)面，n可為正整數(shù)或負(fù)整數(shù)

2.this.$router.go(1) // 類似history.forward()

3.this.$router.go(-1) // 類似history.back()

總結(jié)區(qū)別：

this.$router.push
跳轉(zhuǎn)到指定url路徑，并想history棧中添加一個(gè)記錄，點(diǎn)擊后退會(huì)返回到上一個(gè)頁(yè)面

this.$router.replace
跳轉(zhuǎn)到指定url路徑，但是history棧中不會(huì)有記錄，點(diǎn)擊返回會(huì)跳轉(zhuǎn)到上上個(gè)頁(yè)面 (就是直接替換了當(dāng)前頁(yè)面)

this.$router.go(n)
向前或者向后跳轉(zhuǎn)n個(gè)頁(yè)面，n可為正整數(shù)或負(fù)整數(shù)

以上就是“Vue路由跳轉(zhuǎn)方式的區(qū)別是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。