快捷導(dǎo)航

vue跳轉(zhuǎn)方式的常見方式以及區(qū)別分析

更新時(shí)間：2024年02月13日 08:32:09 作者：言無(wú)惑

在Vue.js中頁(yè)面跳轉(zhuǎn)是前端開發(fā)中常見的需求,Vue提供了多種頁(yè)面跳轉(zhuǎn)方式,這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)方式的常見方式以及區(qū)別分析的相關(guān)資料,需要的朋友可以參考下

1.router-link

不帶參數(shù)

<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}">

name,path都行, 建議用name（path路徑可能會(huì)變，但是只要name不變路由就依然可以跳轉(zhuǎn)，減少一定的開發(fā)成本。）
注意：router-link中鏈接如果是’/‘開始就是從根路由開始，如果開始不帶’/'，則從當(dāng)前路由開始。

帶參數(shù)(params)

<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

帶參數(shù)(query)

<router-link :to="{name:'home', query: {id:1}}">

query傳參數(shù) (類似get,url后面會(huì)顯示參數(shù))，路由可不配置

取參方式

html 取參 $route.query.id
script 取參 this.$route.query.id

2.this.$router.push()

不帶參數(shù)

this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

path 和 Name路由跳轉(zhuǎn)方式，都可以用query傳參
params傳參，push里面只能是 name:‘xxx’,不能是path:‘/xxx’,因?yàn)閜arams只能用name來(lái)引入路由，如果這里寫成了path，接收參數(shù)頁(yè)面會(huì)是undefined；

query傳參

this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})

取參方式

html 取參 $route.query.id
script 取參 this.$route.query.id

params傳參

this.$router.push({name:'home',params: {id:'1'}})  // 只能用 name

路由配置 path: “/home/:id” 或者 path: “/home:id”，配置是在router文件里配置的
不配置path ,第一次可請(qǐng)求,刷新頁(yè)面id會(huì)消失
配置path,刷新頁(yè)面id會(huì)保留

取參方式

html 取參 $route.params.id
script 取參 this.$route.params.id

query和params區(qū)別

query：類似 get, 跳轉(zhuǎn)之后頁(yè)面 url后面會(huì)拼接參數(shù),類似?id=1, 非重要性的可以這樣傳, 密碼之類還是用，params刷新頁(yè)面id還在
params：類似 post, 跳轉(zhuǎn)之后頁(yè)面 url后面不會(huì)拼接參數(shù) , 但是刷新頁(yè)面id 會(huì)消失

3.this.$router.replace() (用法同上,push)

4.this.$router.go(n)

this.$router.go(n)	向前或者向后跳轉(zhuǎn)n個(gè)頁(yè)面，n可為正整數(shù)或負(fù)整數(shù)
router.go(1)	在瀏覽器記錄中向前進(jìn)一步，等同于history.forward(）
router.go(-1)	后退一步記錄，等同于history.back()

5.三者區(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ù)

6.router和route的區(qū)別

router : 是路由操作對(duì)象，只寫對(duì)象
route : 路由信息對(duì)象，只讀對(duì)象
router操作路由跳轉(zhuǎn)
this.$router.push({ name:‘hello’, params:{ name:‘word’, age:‘11’ } })
route讀取路由參數(shù)接收
var name = this.$route.params.name;
1.router是vueRouter的一個(gè)對(duì)象，通過(guò)vue.use(vueRouter)和vueRouter構(gòu)造函數(shù)得到一個(gè)router的實(shí)例對(duì)象，這個(gè)對(duì)象中是一個(gè)全局的對(duì)象，他包含了所有的路由包含了許多關(guān)鍵的對(duì)象和屬性。
2.route是一個(gè)跳轉(zhuǎn)的路由對(duì)象，每一個(gè)路由都會(huì)有一個(gè)route對(duì)象，是一個(gè)局部的對(duì)象，可以獲取對(duì)應(yīng)的name,path,params,query等