Vue中的路由跳轉(zhuǎn)(返回、刷新、跳轉(zhuǎn))
Vue路由跳轉(zhuǎn)(返回、刷新、跳轉(zhuǎn))
this.$router.go(-1)
原頁(yè)面表單中的內(nèi)容會(huì)丟失；
向前或者向后跳轉(zhuǎn)n個(gè)頁(yè)面，n可為正整數(shù)或負(fù)整數(shù)
- this.$router.go(-1)：后退+刷新
- this.$router.go(0)：刷新；
- this.$router.go(1) ：前進(jìn)
this.$router.back()
原頁(yè)表表單中的內(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è)頁(yè)面
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)求,刷新頁(yè)面id會(huì)消失
配置path,刷新頁(yè)面id會(huì)保留
- html 取參
$route.params.id - script 取參
this.$route.params.id
4. query和params區(qū)別
- query類似 get, 跳轉(zhuǎn)之后頁(yè)面 url后面會(huì)拼接參數(shù),類似?id=1, 非重要性的可以這樣傳,
- params類似 post, 跳轉(zhuǎn)之后頁(yè)面 url后面不會(huì)拼接參數(shù) , 但是刷新頁(yè)面id 會(huì)消失,密碼之類還是用params刷新頁(yè)面
this.$router.replace
跳轉(zhuǎn)到指定url路徑，但是history棧中不會(huì)有記錄，點(diǎn)擊返回會(huì)跳轉(zhuǎn)到上上個(gè)頁(yè)面 (就是直接替換了當(dāng)前頁(yè)面)【A----->B----->C 結(jié)果B被C替換 A----->C)】
- 用法同
this.$router.push
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue 動(dòng)態(tài)設(shè)置img的src地址無(wú)效,npm run build 后找不到文件的解決
這篇文章主要介紹了vue 動(dòng)態(tài)設(shè)置img的src地址無(wú)效,npm run build 后找不到文件的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue .then和鏈?zhǔn)秸{(diào)用操作方法
這篇文章主要介紹了vue .then和鏈?zhǔn)秸{(diào)用操作方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
vue使用advanced-mark.js實(shí)現(xiàn)高亮文字效果
在日常項(xiàng)目中我們往往會(huì)有搜索高亮的需求,下面這篇文章主要介紹了vue使用advanced-mark.js實(shí)現(xiàn)高亮文字效果的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-08-08
VUE項(xiàng)目自動(dòng)檢測(cè)服務(wù)端是否發(fā)布了新版本
本文主要介紹了VUE項(xiàng)目自動(dòng)檢測(cè)服務(wù)端是否發(fā)布了新版本,通過(guò)輪詢方式檢測(cè)Vue項(xiàng)目新版本并提示用戶刷新頁(yè)面,具有一定的參考價(jià)值,感興趣的可以了解一下2025-01-01
這篇文章主要介紹了Vue.native如何將原生事件綁定到組件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue3屬性綁定方法解析，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
vue動(dòng)態(tài)路由匹配和路由懶加載多種方法詳解
這篇文章主要介紹了vue動(dòng)態(tài)路由匹配和路由懶加載,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
Vue.js獲取手機(jī)系統(tǒng)型號(hào)、版本、瀏覽器類型的示例代碼
這篇文章主要介紹了vue js獲取手機(jī)系統(tǒng)型號(hào)、版本、瀏覽器類型的示例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
詳解vue中在父組件點(diǎn)擊按鈕觸發(fā)子組件的事件
這篇文章主要介紹了詳解vue中在父組件點(diǎn)擊按鈕觸發(fā)子組件的事件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了vue如何獲取自定義元素屬性參數(shù)值的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05