腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

vue中$router.back()和$router.go()的用法

更新時(shí)間：2022年09月10日 09:10:11 作者：星宮莓

這篇文章主要介紹了vue中$router.back()和$router.go()的用法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

$router.back()和$router.go()

返回上一頁，有兩種方法：

1. $router.back()

2. $router.go()

使用$router.back()和$router.go(-1)作用相同，都是返回原頁面，但如果原頁面路由攜帶參數(shù)，使用以上兩個(gè)方式返回的原頁面路由參數(shù)消失，此時(shí)使用$router.back(-1)返回原頁面路由，參數(shù)仍存在。

go(-1):原頁面表單中的內(nèi)容會丟失；
this.$router.go(-1):后退+刷新；
this.$router.go(0):刷新；
this.$router.go(1):前進(jìn)；
history.go(-1):后退+刷新；
history.go(1):前進(jìn)；
back():原頁表表單中的內(nèi)容會保留；
this.$router.back()：后退
this.$router.back(0) 刷新
this.$router.back(1) 前進(jìn)
history.back() 后退
history.back(0) 刷新
history.back(1) 前進(jìn)

vue點(diǎn)擊按鈕跳轉(zhuǎn)頁面總結(jié) router.push router.replace router.go

總結(jié)一下在Vue里面跳轉(zhuǎn)頁面的方法

首先是vue提供的router-link，使用后再頁面里會轉(zhuǎn)換為a標(biāo)簽

<router-link to="/test">go home</router-link>

使用函數(shù)進(jìn)行任意頁面跳轉(zhuǎn)

普通跳轉(zhuǎn)

<button @click="jump('/test')">Click Me</button> ? ?// 這里進(jìn)行設(shè)置要跳轉(zhuǎn)的路由
methods: {
? ? ? ? jump (path) {
? ? ? ? ? ? this.$router.replace(path)
? ? ? ? }
? ? ? ??
?? ??? ?// 或者
?? ??? ?jump (path) {
? ? ? ? ? ? this.$router.push({path: path})
? ? ? ? }
? ? }

帶參數(shù)跳轉(zhuǎn)

<button @click="jump('/test')">Click Me</button> ? ?// 這里進(jìn)行設(shè)置要跳轉(zhuǎn)的路由
methods: {
?? ??? ?jump (path) {
? ? ? ? ? ? this.$router.push({path: `${path}?a=1`})
? ? ? ? }
? ? ? ??
? ? ? ? // 或者
? ? ? ? jump (path) {
? ? ? ? ? ? this.$router.push({path: path, query:{a:123}})
? ? ? ? }
? ? }

前進(jìn)

@click="$router.go(1)"

后退

@click="$router.back()"
?? ?// 或者
@click="$router.go(-1)"

刷新當(dāng)前頁面

@click="$router.go(0)"
?? ?// 或者
window.location.reload()
?? ?// 或者
history.go(0)

解析router.push 和 router.replace的區(qū)別

先說結(jié)論：router.push會在瀏覽器歷史紀(jì)錄里面添加一條記錄，router.replace不會在瀏覽器的歷史記錄里面添加信息。也就是通過router.push跳轉(zhuǎn)的頁面能夠返回上一頁。這里的上一頁指的是跳轉(zhuǎn)之前的那一頁

驗(yàn)證：首先打開一個(gè)新的vue項(xiàng)目，把鼠標(biāo)指針放在瀏覽器左上角的回退按鈕并按住左鍵，能夠看到目前瀏覽器歷史記錄除了默認(rèn)新開打的一個(gè)頁面沒有任何其他vue路由信息

使用 this.$router.replace(path)這個(gè)方法跳轉(zhuǎn)后，再次點(diǎn)擊，可以看到路由跳轉(zhuǎn)后，歷史紀(jì)錄里面跟新打開的項(xiàng)目一樣。

說明使用router.replace不會往瀏覽器歷史記錄里添加信息。并且點(diǎn)擊返回按鈕也是返回到空頁面，并不會返回到vue的首頁

然后使用this.$router.push(path)方法，點(diǎn)擊跳轉(zhuǎn)后能夠看到歷史記錄里面多了一條記錄

點(diǎn)擊返回后，也能夠返回到首頁。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频