vue跳转页面传递参数
本章节主要是讲解在vue跳转页面时候怎么传递参数。最后会发上实现源代码。
准备工作
首先准备好两个vue文件，配置好page.json页面路径
功能实现
js中写好一个要传递的参数a、跳转时需要的事件tiaozhuan()、在a参数加上数据，下面举例说明。
// js举例代码 data() { return { a: [] } }, onLoad() { this.addtemp() }, methods: { addtemp() { this.a.push({name:"张三"}) }, tiaozhuan() { uni.navigateTo({ url: '/pages/uni-style/navi' }) }
跳转参数的方式就是在url中添加数据名和解析对象的字符串。通过JSON.stringify对a对象解析出字符串，语法格式如下：
url:‘/…/…/…?a=’+JSON.stringify(this,a)
其中a是参数名，this.a是参数的实际JSON数据。跳转后接收的方式是在onLoad加载事件中取值
// An highlighted block data() { return { test: '' } }, onLoad(options) { let temp = JSON.parse(options.a) this.test = temp[0].name console.log(this.test) }
在这里我做了一个test作为接收的参数，用options和JSON.parse方法接收值，JSON.parse主要作用是把一个JSON字符串解析成一个对象。通过中间值temp来对新页面数据进行赋值。接下就是代码和成品展示。
下面展示。
// 跳转前页面 <template> <view> <view @click="tiaozhuan">跳转</view> </view> </template> <script> export default { data() { return { a: [] } }, onLoad() { this.addtemp() }, methods: { addtemp() { this.a.push({name:"张三"}) }, tiaozhuan() { uni.navigateTo({ url: '/pages/uni-style/navi?a=' + JSON.stringify(this.a) }) } } } </script> <style> </style>
// 跳转后代码 <template> </template> <script> export default { data() { return { test: '' } }, onLoad(options) { let temp = JSON.parse(options.a) this.test = temp[0].name console.log(this.test) } } </script> <style> </style>
成品展示
点击跳转后
