un-app uni.navigateTo页面跳转做封装传参

墨蓝 2024-04-17 21:17 49阅读 0赞

uni-app在页面跳转的时候是可以传参的，官方给的方法就是在路由后拼接传参地址

[uni.navigateTo(OBJECT)][uni.navigateTo_OBJECT]

保留当前页面，跳转到应用内的某个页面，使用`uni.navigateBack`可以返回到原页面。

**OBJECT参数说明**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>默认值</th> 
   <th>说明</th> 
   <th>平台差异说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>url</td> 
   <td>String</td> 
   <td>是</td> 
   <td>&nbsp;</td> 
   <td>需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&amp;分隔；如 'path?key=value&amp;key2=value2'，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数</td> 
   <td>:-</td> 
  </tr> 
  <tr> 
   <td>animationType</td> 
   <td>String</td> 
   <td>否</td> 
   <td>pop-in</td> 
   <td>窗口显示的动画效果，详见：<a href="https://uniapp.dcloud.io/api/router?id=animation" rel="nofollow">窗口动画</a></td> 
   <td>5+App</td> 
  </tr> 
  <tr> 
   <td>animationDuration</td> 
   <td>Number</td> 
   <td>否</td> 
   <td>300</td> 
   <td>窗口动画持续时间，单位为 ms</td> 
   <td>5+App</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>&nbsp;</td> 
   <td>接口调用成功的回调函数</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>&nbsp;</td> 
   <td>接口调用失败的回调函数</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>&nbsp;</td> 
   <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

**示例**

//在起始页面跳转到test.vue页面并传递参数
    uni.navigateTo({
        url: 'test?id=1&name=uniapp'
    });

对于做开发的这种传参不太习惯，还是习惯了用一个字典作为传参数据

### 下面对[uni.navigateTo][uni.navigateTo_OBJECT]做一下封装并带参数封装 ###

首先单独写一个js文件用来封装页面跳转(注意：动画那些没有写进来，如果想要可以自己加)

navTo.js

const togo = function(url,data){
    	url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
    	
    	uni.navigateTo({  
    		url
    	}) 
    }
    
    exprot function param(data) {
      let url = ''
      for (var k in data) {
        let value = data[k] !== undefined ? data[k] : ''
        url += '&' + k + '=' + encodeURIComponent(value)
      }
      return url ? url.substring(1) : ''
    }
    
    exprot {togo}

然后在main.js中注册全局变量

import * as navTo from '@/assets/navTo'
    Vue.prototype.$navTo = navTo

最后调用（在vue页面）

或者在methods钩子也可以

methods: {
        to(){
            let url = '/pages/index/index'
            let param = {
                type:1,
                name: 'YanGo'
            }
            this.$navTo.togo(url,param)
        }
    }

[uni.navigateTo_OBJECT]: https://uniapp.dcloud.io/api/router?id=navigateto