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

 更新时间:2022年09月10日 09:10:11   作者:星宫莓  
这篇文章主要介绍了vue中$router.back()和$router.go()的用法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

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

返回上一页,有两种方法:

1. $router.back()

2. $router.go()

使用$router.back()和$router.go(-1)作用相同,都是返回原页面,但如果原页面路由携带参数,使用以上两个方式返回的原页面路由参数消失,此时使用$router.back(-1)返回原页面路由,参数仍存在。

  • go(-1):原页面表单中的内容会丢失;
  • this.$router.go(-1):后退+刷新;
  • this.$router.go(0):刷新;
  • this.$router.go(1):前进; 
  • history.go(-1):后退+刷新;
  • history.go(1):前进; 
  • back():原页表表单中的内容会保留;
  • this.$router.back():后退
  • this.$router.back(0) 刷新
  • this.$router.back(1) 前进 
  • history.back() 后退
  • history.back(0) 刷新
  • history.back(1) 前进

vue点击按钮跳转页面总结 router.push router.replace router.go

总结一下在Vue里面跳转页面的方法

首先是vue提供的router-link,使用后再页面里会转换为a标签

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

使用函数进行任意页面跳转

普通跳转

<button @click="jump('/test')">Click Me</button> ? ?// 这里进行设置要跳转的路由
methods: {
? ? ? ? jump (path) {
? ? ? ? ? ? this.$router.replace(path)
? ? ? ? }
? ? ? ??
?? ??? ?// 或者
?? ??? ?jump (path) {
? ? ? ? ? ? this.$router.push({path: path})
? ? ? ? }
? ? }

带参数跳转

<button @click="jump('/test')">Click Me</button> ? ?// 这里进行设置要跳转的路由
methods: {
?? ??? ?jump (path) {
? ? ? ? ? ? this.$router.push({path: `${path}?a=1`})
? ? ? ? }
? ? ? ??
? ? ? ? // 或者
? ? ? ? jump (path) {
? ? ? ? ? ? this.$router.push({path: path, query:{a:123}})
? ? ? ? }
? ? }

前进

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

后退

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

刷新当前页面

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

解析router.push 和 router.replace的区别 

先说结论:router.push会在浏览器历史纪录里面添加一条记录,router.replace不会在浏览器的历史记录里面添加信息。也就是通过router.push跳转的页面能够返回上一页。这里的上一页指的是跳转之前的那一页

验证:首先打开一个新的vue项目,把鼠标指针放在浏览器左上角的回退按钮并按住左键,能够看到目前浏览器历史记录除了默认新开打的一个页面没有任何其他vue路由信息

使用 this.$router.replace(path)这个方法跳转后,再次点击,可以看到路由跳转后,历史纪录里面跟新打开的项目一样。

说明使用router.replace不会往浏览器历史记录里添加信息。并且点击返回按钮也是返回到空页面,并不会返回到vue的首页

然后使用this.$router.push(path)方法,点击跳转后能够看到历史记录里面多了一条记录

点击返回后,也能够返回到首页。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持程序员之家。

相关文章

  • Vue防止白屏添加首屏动画的实例

    Vue防止白屏添加首屏动画的实例

    今天小编就为大家分享一篇Vue防止白屏添加首屏动画的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue公共loading升级版解决思路(处理并发异步差时响应)

    Vue公共loading升级版解决思路(处理并发异步差时响应)

    这篇文章主要介绍了Vue公共loading升级版(处理并发异步差时响应),解决思路是通过定义一个全局对象来存储每个接口的响应状态,直到每个请求接口都收到响应才变更状态,结束loading动画,需要的朋友可以参考下
    2023-11-11
  • Vue中插槽Slot基本使用与具名插槽详解

    Vue中插槽Slot基本使用与具名插槽详解

    有时候我们希望在指定的位置输出我们的子元素,这时候具名插槽就排上了用场,这篇文章主要给大家介绍了关于Vue中插槽Slot基本使用与具名插槽的相关资料,需要的朋友可以参考下
    2022-10-10
  • Electron vue的使用教程图文详解

    Electron vue的使用教程图文详解

    Electron相当于一个浏览器的外壳,可以把网页程序嵌入到壳里面,可以运行在桌面上的一个程序,可以把网页打包成一个在桌面运行的程序。这篇文章主要介绍了electron-vue多显示屏下将新窗口投放是其他屏幕 ,需要的朋友可以参考下
    2019-07-07
  • vue v-on:click传递动态参数的步骤

    vue v-on:click传递动态参数的步骤

    这篇文章主要介绍了vue v-on:click传递动态参数的步骤,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue前端实现打印下载示例详解

    vue前端实现打印下载示例详解

    这篇文章主要为大家介绍了vue前端实现打印下载示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • antd?vue中,如何在form表单中的自定义组件使用v-decorator

    antd?vue中,如何在form表单中的自定义组件使用v-decorator

    antd?vue中,在form表单中的自定义组件使用v-decorator问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vuex中mutations与actions的区别详解

    Vuex中mutations与actions的区别详解

    下面小编就为大家分享一篇Vuex中mutations与actions的区别详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue3中reactive不能直接赋值的解决方案

    vue3中reactive不能直接赋值的解决方案

    这篇文章主要介绍了vue3中reactive不能直接赋值的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 详解如何去除vue项目中的#——History模式

    详解如何去除vue项目中的#——History模式

    这篇文章主要介绍了详解如何去除vue项目中的#——History模式 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10

最新评论

?


http://www.vxiaotou.com