VUE中路由变化this.$router(push\replace\go\back)解读

 更新时间:2023年10月24日 11:27:31   作者:前端不加班  
这篇文章主要介绍了VUE中路由变化this.$router(push\replace\go\back),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

1.this.$router.push()

描述

跳转到指定的url,但这个方法回向history添加一个记录,点击后退会返回到上一个页面。

用法

// 1字符串
this.$router.push('/user/order')
// 2对象
this.$router.push({ path: '/user/order' })
//3传参
this.$router.push({ path: '/user/order', query: {id: 123} })
//3-1取参数
this.$route.query.id
//4命名的路由
this.$router.push({ name: '/user/order', params: {id: 123} })
//4-1取参数
this.$route.params.id

2.this.$router.replace()

描述

同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。

用法

同this.$router.push()

3.this.$router.go()

原页面表单中的内容会丢失

  • this.$router.go(-1):后退+刷新;
  • this.$router.go(0):刷新;
  • this.$router.go(1) :前进

4.this.$router.back()

原页表表单中的内容会保留

  • this.$router.back(-1):后退 ;
  • this.$router.back(0):刷新;
  • this.$router.back(1):前进

总结

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

相关文章

  • vue3中nextTick()应用实例详解

    vue3中nextTick()应用实例详解

    这篇文章主要给大家介绍了关于vue3中nextTick()应用的相关资料,nextTick()等待下一次DOM更新刷新的工具方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • vue导出word纯前端的实现方式

    vue导出word纯前端的实现方式

    这篇文章主要介绍了vue导出word纯前端的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • VUE 动态组件的应用案例分析

    VUE 动态组件的应用案例分析

    这篇文章主要介绍了VUE 动态组件的应用,结合具体案例形式分析了vue.js动态组件的应用场景、解决方案及相关操作技巧,需要的朋友可以参考下
    2019-12-12
  • 详解vue3沙箱机制

    详解vue3沙箱机制

    这篇文章主要介绍了详解vue3 沙箱机制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • 五分钟搞懂Vuex实用知识(小结)

    五分钟搞懂Vuex实用知识(小结)

    本篇文章主要介绍了五分钟搞懂Vuex实用知识,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue中使用rem布局代码详解

    vue中使用rem布局代码详解

    在本篇文章里小编给大家整理的是关于vue中使用rem布局代码详解知识点,需要的朋友们参考下。
    2019-10-10
  • vue 实现数字滚动增加效果的实例代码

    vue 实现数字滚动增加效果的实例代码

    最近做了个项目需要做数字滚动增加的效果,刚开始接到这个项目还真是懵了,后来发现实现代码很简单的,下面小编给大家带来了vue 实现数字滚动增加效果的实例代码,需要的朋友参考下吧
    2018-07-07
  • vue中使用mxgraph的方法实例代码详解

    vue中使用mxgraph的方法实例代码详解

    这篇文章主要介绍了vue中使用mxgraph的方法实例代码详解,需要的朋友可以参考下
    2019-05-05
  • vue内置指令详解

    vue内置指令详解

    指令是Vue模板中最常用的一项功能,它带有前缀v-,主要职责是当其表达式的值改变时,相应的将某些行为应用在 DOM 上。这篇文章主要介绍了vue内置指令详解,需要的朋友可以参考下
    2018-04-04
  • 使用vant的地域控件追加全部选项

    使用vant的地域控件追加全部选项

    这篇文章主要介绍了使用vant的地域控件追加全部选项,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11

最新评论