vue在跳转页面的同时传递参数

最新推荐文章于 2024-02-27 19:49:05 发布

原创最新推荐文章于 2024-02-27 19:49:05 发布 · 509 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了一种使用Vue.js框架实现页面间参数传递的方法。通过定义按钮点击事件触发页面跳转，并利用$router.push方法携带参数。接收页面通过this.$route.query获取传递过来的数据。

A页面

<template>
    <button @click="jump">点击跳转</button>
</template>

<script>
    export default {
        data() {
            return {
                parameter:"小狐疑真是个靓仔",//传的参数
            }
        }
        methods: {
        	jump：{
        		this.$router.push({
                  //跳转的路径
                  path: "/helpService/orderPay" ，
                  //需要传递的参数
                  query: {
                    //取个别名，在跳转到的页面接收 -我觉得最好是和当前页面的变量名一样
                    parameter：JSON.stringify(this.parameter),
                  }
                })
    		}，
    	}
        
    }
</script>

B页面接收

<template>
    <!--这里渲染的是：小狐疑真是个靓仔-->
   {{parameter}}
</template>

<script>
     export default {
        data() {
            return {
                parameter:"",//接收参数
            }
        }
		//放在这里面每次页面加载时都会被加载到
       mounted: function() {
           //接收A页面传过来的参数 -this.$route.query.parameter：就是楼上取的别名
           this.parameter = JSON.parse(this.$route.query.parameter);
       }
        
    }
    
</script>