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 动态设置img的src地址无效,npm run build 后找不到文件的解决
这篇文章主要介绍了vue 动态设置img的src地址无效,npm run build 后找不到文件的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue .then和链式调用操作方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
在日常项目中我们往往会有搜索高亮的需求,下面这篇文章主要介绍了vue使用advanced-mark.js实现高亮文字效果的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-08-08
本文主要介绍了VUE项目自动检测服务端是否发布了新版本,通过轮询方式检测Vue项目新版本并提示用户刷新页面,具有一定的参考价值,感兴趣的可以了解一下2025-01-01
这篇文章主要介绍了Vue.native如何将原生事件绑定到组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue3属性绑定方法解析，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
这篇文章主要介绍了vue动态路由匹配和路由懒加载,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue js获取手机系统型号、版本、浏览器类型的示例代码，代码简单易懂，非常不错具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了详解vue中在父组件点击按钮触发子组件的事件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要介绍了vue如何获取自定义元素属性参数值的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
最新评论