VUE使用router.push实现页面跳转和传参方式
更新时间：2024年01月22日 10:32:50 作者：一颗哈士奇
这篇文章主要介绍了VUE使用router.push实现页面跳转和传参方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
使用router.push实现页面跳转和传参
vue项目中在需要不同页面之间跳转并且传递数据时，通常会使用router.push较为方便，当然使用windows.href和sessionStorage一起用也可以达到效果，但是sessionStorage通常储存的是全局性常用的变量。
而router.push传递的参数生命周期很短，当跳转的页面关闭或跳转至其他页面时，参数生命周期结束。
一起来看router.push的使用方法：
1.不传参数的跳转
this.$router.push('./lastPage')//跳转至当前目录的lastPage页面或者用路由名字：
this.$router.push('ResourceTable')//跳转至路由名为ResourceTable的页面
2.带参数
用pararms传递：（注意前面一定是name）
this.$router.push({ name: 'ResourceTable', params: { myId: 123 }})//跳转至ResourceTable路由并传递一个数据接受参数
this.$route.params //将返回{ myId: 123 }用query传递：（注意前面一定是path）
this.$router.push({ path: './ResourceTable', query: { myId: 123 }})//跳转当前目录ResourceTable路由并传递一个数据接受参数
this.$route.query //将返回 { myId: 123 }总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue下拉列表功能实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-04-04
今天小编就为大家分享一篇vue+elementui 对话框取消 表单验证重置示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
vue3使用Pinia修改state的三种方法(直接修改，$patch，actions)
Vue3 Pinia是一个状态管理库,专门为Vue3设计优化,它提供了一种简单而强大的方式来管理应用程序的状态,并且与Vue3的响应式系统紧密集成,本文给大家介绍了vue3使用Pinia修改state的三种方法,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue select组件绑定的值为数字类型遇到的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
电商网站的首页内容会比较多，页面比较长，为了能让用户在滚动浏览内容的过程中都能够快速的切换到其它分类。需要分类导航一直可见，所以需要一个吸顶导航的效果。目标:完成头部组件吸顶效果的实现2023-04-04
TinyMCE Vue是TinyMCE官方发布的Vue组件，可以更轻松地在Vue应用程序中使用TinyMCE，这篇文章主要介绍了vue中tinymce的使用,需要的朋友可以参考下2022-11-11
本文主要介绍了vue+vite+diff.js使用小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-12-12
在Vue中有多种方式可以进行路由跳转并传递参数,这篇文章主要给大家介绍了关于vue路由三种传参方式的相关资料,文中介绍的方法分别包括params传参、query传参(显示传参)以及props传参(路由组件传参),,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了Vue自定义指令及使用，对Vue感兴趣的同学，可以参考下2021-05-05
Vite 是一个面向现代浏览器的更轻,更快的web应用开发工具,下面这篇文章主要给大家介绍了关于如何使用vite搭建vue3项目的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
最新评论