1.router-link

不帶參數(shù)

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

• name,path都行, 建議用name（path路徑可能會變，但是只要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 ,第一次可請求,刷新頁面id會消失

• 配置path,刷新頁面id會保留

取參方法

• html 取參 $route.params.id

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

帶參數(shù)(query)

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

• query傳參數(shù) (類似get,url后面會顯示參數(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’,因為params只能用name來引入路由，如果這里寫成了path，接收參數(shù)頁面會是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 ,第一次可請求,刷新頁面id會消失

• 配置path,刷新頁面id會保留

取參方式

• html 取參 $route.params.id

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

query和params區(qū)別

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

• params：類似 post, 跳轉(zhuǎn)之后頁面 url后面不會拼接參數(shù) , 但是刷新頁面id 會消失

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

4.this.$router.go(n)

this.$router.go(n)	向前或者向后跳轉(zhuǎn)n個頁面，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棧中添加一個記錄，點擊后退會返回到上一個頁面

• this.$router.replace

• 跳轉(zhuǎn)到指定url路徑，但是history棧中不會有記錄，點擊返回會跳轉(zhuǎn)到上上個頁面 (就是直接替換了當(dāng)前頁面)

• this.$router.go(n)

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

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

• router : 是路由操作對象，只寫對象

• route : 路由信息對象，只讀對象

• router操作路由跳轉(zhuǎn)

• this.$router.push({ name:‘hello’, params:{ name:‘word’, age:‘11’ } })

• route讀取 路由參數(shù)接收

• var name = this.$route.params.name;

• 1.router是vueRouter的一個對象，通過vue.use(vueRouter)和vueRouter構(gòu)造函數(shù)得到一個router的實例對象，這個對象中是一個全局的對象，他包含了所有的路由包含了許多關(guān)鍵的對象和屬性。

• 2.route是一個跳轉(zhuǎn)的路由對象，每一個路由都會有一個route對象，是一個局部的對象，可以獲取對應(yīng)的name,path,params,query等

7.vue跳轉(zhuǎn)外部鏈接

• window.open() *// 在新窗口打開外鏈接

• window.location.href (); *//在本頁面打開外部鏈接

總結(jié) 

到此這篇關(guān)于vue跳轉(zhuǎn)方式的常見方式以及區(qū)別的文章就介紹到這了,更多相關(guān)vue跳轉(zhuǎn)方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論