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

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

uni.navigateTo(OBJECT)

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

OBJECT参数说明

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

示例

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

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

下面对uni.navigateTo做一下封装并带参数封装

首先单独写一个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页面）

<view @click="$navTo.togo('/pages/index/index',{type:1,name:'YanGo'})"></view>

或者在methods钩子也可以

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

un-app uni.navigateTo页面跳转做封装传参相关推荐

微信小程序页面跳转，url传参参数丢失问题
微信小程序页面跳转,url传参参数丢失问题 // pages/order/purchase/index.js// 跳转到采购订单详情toPurchaseOrderDetail(e) {// conso ...
uni.navigateTo 无法跳转到页面
uni.navigateTo 无法跳转到页面我们的其他页面的跳转我们可以通过以下的命令来进行页面的跳转: uni.navigateTo({url: '/pages/notice/notice' }) ...
【uniapp】跳转 navigateTo 页面跳转路径有层级限制，不能无限制跳转新页面解决方法
onLoad(options) {let pages = getCurrentPages();// 获取页面栈总页数this.pagesCount = pages.length; } // 去跳转to ...
微信小程序的路由跳转、路由传参
1.路由跳转声明式:就是指标签实现的跳转方式: 编程式:就是指js事件实现的跳转方式: 原生js跳转:(2种) 声明式:a标签属性 href 编程式:location ...
小程序页面跳转-url地址传参的参数处理
传递参数为对象格式若参数为对象则需先使用 JSON.stringify()进行转换 , 接收后使用JSON.parse()转为对象传递参数中含有? = &等特殊字符若传递参数中含有=,? ...
vue——路由之路由跳转、路由传参、路由嵌套、路由模式
相关认识: 后端路由:对于前端的网络请求,不同的pathname,去执行后端的不同业务前端路由:不同的网址对应各自的页面 vue的前端路由:SPA应用要做出路由效果,就得判断当前网址,然后切换组件 ...
几个经常用到的angular路由Router、ActivatedRoute 知识点：嵌套路由、路由跳转、路由传参、路由参数获取
深度玩家可移步Angular - 常见路由任务 1.嵌套路由 const routes: Routes = [{path: 'first',component: FirstComponent,//同步 ...
vue路由跳转以及路由传参接收
路由跳转 1.声明式路由跳转 (不带参数) 通过router-link标签进行跳转,使用name或者path都可以,在dom结构中会被渲染成a标签注意:router-link中链接如果是'/'开始就 ...
【页面不丢失】三传参随便传
收藏: https://blog.csdn.net/Wave_explosion/article/details/121999104 数组遍历: https://blog.csdn.net/Wave_ ...
vue 跳转外部链接传参整个路由，获取路由上的参数
一.传参路由要先编码encodeURIComponent 二.传到下个页面要先解码decodeURIComponent 三.获取路由上的参数 getUrlKey(keyname, url) {retu ...

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

下面对uni.navigateTo做一下封装并带参数封装

un-app uni.navigateTo页面跳转做封装传参相关推荐

最新文章

热门文章