Vue中的路由跳转(返回、刷新、跳转)

更新时间：2023年12月04日 14:35:23 作者：半生过往

这篇文章主要介绍了Vue中的路由跳转(返回、刷新、跳转)方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue路由跳转(返回、刷新、跳转)

this.$router.go(-1)

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

向前或者向后跳转n个页面，n可为正整数或负整数

this.$router.go(-1)：后退+刷新
this.$router.go(0)：刷新；
this.$router.go(1) ：前进

this.$router.back()

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

this.$router.back():后退；
this.$router.back(0) 刷新；
this.$router.back(1)：前进

this.$router.push

跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面

1. 不带参数

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 ,第一次可请求,刷新页面id会消失

配置path,刷新页面id会保留

html 取参 $route.params.id
script 取参 this.$route.params.id

4. query和params区别

query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传,
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失,密码之类还是用params刷新页面

this.$router.replace

跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)【A----->B----->C 结果B被C替换 A----->C)】

用法同

this.$router.push

总结

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

您可能感兴趣的文章:

深入了解vue-router原理并实现一个小demo
这篇文章主要为大家详细介绍了vue-router原理并实现一个小demo，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
vue中设置echarts宽度自适应的代码步骤
这篇文章主要介绍了vue中设置echarts宽度自适应的问题及解决方案,常常需要做到echarts图表的自适应，一般是根据页面的宽度做对应的适应，本文记录一下设置echarts图表的自适应的步骤，需要的朋友可以参考下
2022-09-09
vuex存储数据的几种方法实例详解
在浏览网页时我们有些时候需要记住一些用户选择的信息,比如登陆时我们如果选择了记住密码,那么我们下次进入该网页时就会有你上次的登陆信息,下面这篇文章主要给大家介绍了关于vuex存储数据的几种方法,需要的朋友可以参考下
2022-10-10
解决vue中axios设置超时(超过5分钟)没反应的问题
这篇文章主要介绍了解决vue中axios设置超时(超过5分钟)没反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue draggable resizable gorkys与v-chart使用与总结
这篇文章主要介绍了vue draggable resizable gorkys与v-chart使用与总结,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-09-09
简单了解vue中父子组件如何相互传递值（基础向）
这篇文章主要介绍了简单了解vue中父子组件如何相互传递值（基础向）,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07
VSCode使React Vue代码调试变得更爽
这篇文章主要为大家介绍了VSCode使React Vue代码调试变得更爽的使用方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
Vue中render函数的使用方法
本篇文章主要介绍了Vue中render函数的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
vue 判断两个时间插件结束时间必选大于开始时间的代码
这篇文章主要介绍了vue 判断两个时间插件结束时间必选大于开始时间的代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
使用Nuxt.js改造已有项目的方法
这篇文章主要介绍了使用Nuxt.js改造已有项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08