Vue中的路由跳轉(zhuǎn)(返回、刷新、跳轉(zhuǎn))
Vue路由跳轉(zhuǎn)(返回、刷新、跳轉(zhuǎn))
this.$router.go(-1)
原頁面表單中的內(nèi)容會(huì)丟失；
向前或者向后跳轉(zhuǎn)n個(gè)頁面，n可為正整數(shù)或負(fù)整數(shù)
- this.$router.go(-1)：后退+刷新
- this.$router.go(0)：刷新；
- this.$router.go(1) ：前進(jìn)
this.$router.back()
原頁表表單中的內(nèi)容會(huì)保留
- this.$router.back():后退 ；
- this.$router.back(0) 刷新；
- this.$router.back(1)：前進(jìn)
this.$router.push
跳轉(zhuǎn)到指定url路徑，并想history棧中添加一個(gè)記錄，點(diǎn)擊后退會(huì)返回到上一個(gè)頁面
1. 不帶參數(shù)
this.$router.push('/home')
this.$router.push({name:‘home'})
this.$router.push({path:'/home'})2. 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
3. params傳參
this.$router.push({name:‘home',params: {id:‘1'}}) // 只能用 name路由配置 path: “/home/:id” 或者 path: “/home:id” ,
不配置path ,第一次可請(qǐng)求,刷新頁面id會(huì)消失
配置path,刷新頁面id會(huì)保留
- html 取參
$route.params.id - script 取參
this.$route.params.id
4. query和params區(qū)別
- query類似 get, 跳轉(zhuǎn)之后頁面 url后面會(huì)拼接參數(shù),類似?id=1, 非重要性的可以這樣傳,
- params類似 post, 跳轉(zhuǎn)之后頁面 url后面不會(huì)拼接參數(shù) , 但是刷新頁面id 會(huì)消失,密碼之類還是用params刷新頁面
this.$router.replace
跳轉(zhuǎn)到指定url路徑，但是history棧中不會(huì)有記錄，點(diǎn)擊返回會(huì)跳轉(zhuǎn)到上上個(gè)頁面 (就是直接替換了當(dāng)前頁面)【A----->B----->C 結(jié)果B被C替換 A----->C)】
- 用法同
this.$router.push
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
深入了解vue-router原理并實(shí)現(xiàn)一個(gè)小demo
這篇文章主要為大家詳細(xì)介紹了vue-router原理并實(shí)現(xiàn)一個(gè)小demo，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
vue中設(shè)置echarts寬度自適應(yīng)的代碼步驟
這篇文章主要介紹了vue中設(shè)置echarts寬度自適應(yīng)的問題及解決方案,常常需要做到echarts圖表的自適應(yīng)，一般是根據(jù)頁面的寬度做對(duì)應(yīng)的適應(yīng)，本文記錄一下設(shè)置echarts圖表的自適應(yīng)的步驟，需要的朋友可以參考下2022-09-09
vuex存儲(chǔ)數(shù)據(jù)的幾種方法實(shí)例詳解
在瀏覽網(wǎng)頁時(shí)我們有些時(shí)候需要記住一些用戶選擇的信息,比如登陸時(shí)我們?nèi)绻x擇了記住密碼,那么我們下次進(jìn)入該網(wǎng)頁時(shí)就會(huì)有你上次的登陸信息,下面這篇文章主要給大家介紹了關(guān)于vuex存儲(chǔ)數(shù)據(jù)的幾種方法,需要的朋友可以參考下2022-10-10
解決vue中axios設(shè)置超時(shí)(超過5分鐘)沒反應(yīng)的問題
這篇文章主要介紹了解決vue中axios設(shè)置超時(shí)(超過5分鐘)沒反應(yīng)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue draggable resizable gorkys與v-chart使用與總結(jié)
這篇文章主要介紹了vue draggable resizable gorkys與v-chart使用與總結(jié),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
簡(jiǎn)單了解vue中父子組件如何相互傳遞值（基礎(chǔ)向）
這篇文章主要介紹了簡(jiǎn)單了解vue中父子組件如何相互傳遞值（基礎(chǔ)向）,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
VSCode使React?Vue代碼調(diào)試變得更爽
這篇文章主要為大家介紹了VSCode使React?Vue代碼調(diào)試變得更爽的使用方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
本篇文章主要介紹了Vue中render函數(shù)的使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
vue 判斷兩個(gè)時(shí)間插件結(jié)束時(shí)間必選大于開始時(shí)間的代碼
這篇文章主要介紹了vue 判斷兩個(gè)時(shí)間插件結(jié)束時(shí)間必選大于開始時(shí)間的代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了使用Nuxt.js改造已有項(xiàng)目的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08