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表格组件封装的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2026-03-03
Vue 先初始化父组件再初始化子组件的方法(自定义父子组件mounted执行顺序)
这篇文章主要介绍了Vue 先初始化父组件再初始化子组件的方法（自定义父子组件mounted执行顺序）,本篇内容内容主要讲述了,在使用 Konva 进行开发过程中遇到的一些问题,需要的朋友可以参考下2024-07-07
父子组件使用<script setup>语法糖,父组件通过给子组件定义ref访问子组件内部属性或事件,本文给大家介绍了解决vue3使用ref 获取不到子组件属性问题,文中通过代码示例讲解的非常详细,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了vue移动端如何解决click事件延迟，封装tap等事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
vue如何实现列表自动滚动、向上滚动的效果(vue-seamless-scroll)
这篇文章主要介绍了vue如何实现列表自动滚动、向上滚动的效果(vue-seamless-scroll)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了element el-table 表格限制多选个数功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
在我们开发项目中,特别是流程审批类的项目,最后一步会提交审核,审核员看完相应信息以后,没问题就会签字通过审批,这篇文章主要给大家介绍了关于VUE签字组件vue-esign安装使用的相关资料,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了VUE兄弟组件传值操作,结合实例形式分析了VUE兄弟组件传值操作的原理、步骤、实现方法及相关注意事项,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了解决Vue项目中tff报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了提高vue.js中大型数据的性能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
最新评论