uniapp页面路由传参

最近做的项目碰到页面传参的问题，看文档办法觉得很麻烦，就试着用路由传参，效果如下

<template><view class="content"><image class="logo" src="/static/logo.png"></image><view class="text-area"><text class="title">{{title}}</text></view><view class=""><button type="default" @tap="go('one')">我要到页面一</button><!-- //括号内的参数要用单引号 ，在方法内带参数，--></view><view class=""><button type="default" @tap="go('tow')">我要到页面二</button></view></view>
</template><script>export default {data() {return {title: 'Hello'}},onLoad() {},methods: {go(msg){uni.navigateTo({url:'./select?data='+msg+''})// 将形参拼接带地址上,用？链接参数名data再加上形参msg}}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
</style>

<template><view class=""><view class=""><button type="default" @tap="to('red')">我要红色</button><!-- //括号内的参数要用单引号 ，在方法内带参数，--></view><view class=""><button type="default" @tap="to('blue')">我要蓝色</button></view></view>
</template><script>export default{data(){return{msg:null,// 定义一个变量用于接受上个页面传来的参数}},onLoad:function select(msg){this.msg=msg.dataconsole.log(this.msg)},// onLoad生命周期函数,加载完页面后执行方法把上个页面传来的参数保存到变量里methods:{to(col){uni.navigateTo({url:'./'+this.msg+'?data='+col+''})// 把上个页面传来的参数作为字符串拼接到地址上,再加上本页面要传的参数}}}
</script><style>
</style>

<template><view :class="this.msg">我是页面一</view>
</template><script>export default{data(){return{msg:null}},onLoad:function one(col){this.msg=col.data},}
</script><style>.red{background-color: red;}.blue{background-color: blue;}</style>

<template><view :class="this.msg">我是页面二</view>
</template><script>export default{data(){return{msg:null}},onLoad:function one(col){this.msg=col.data},}
</script><style>.red{background-color: red;}.blue{background-color: blue;}
</style>

小程序舒尔特汉字方格源码：

小程序舒尔特方格源代码_我爱的昵称为什么都存在的博客-CSDN博客小程序舒尔特方格源代码，使用uniapp编写https://blog.csdn.net/weixin_50501118/article/details/125075453

uniapp页面路由传参相关推荐

vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参二.三种传递方式的区别一 ...
几个经常用到的angular路由Router、ActivatedRoute 知识点：嵌套路由、路由跳转、路由传参、路由参数获取
深度玩家可移步Angular - 常见路由任务 1.嵌套路由 const routes: Routes = [{path: 'first',component: FirstComponent,//同步 ...
Vue教程6【完结】【vue-router】路由，路由传参，编程式路由导航，缓存路由组件，路由守卫，路由模式，vue ui组件库
vue-router 了解 vue插件库,用来实现SPA应用(单页面) 整个页面只有一个完整的页面点击页面中导航链接,不会刷新页面,只做局部更新数据通过ajax请求路由的理解一组映射关系(ke ...
Vue 踩坑日志 - 有关路由传参的坑
1.有关路由传参 vue中当通过params传过去的参数刷新页面以后会消失,所以可以用query传参.但此时又会出现另一个坑,刷新后数据仍在.但这是针对单个的某个变量的. 如果传入一个对象的话,刷新页 ...
react更改路由入参_react怎么路由传参？
react路由传参(4种方式) 1.通过params传参(刷新页面后参数不消失,参数会在地址栏显示) 路由页面: //注意要配置 /:id 路由跳转并传递参数:链接方式:XX //或: XXjs方式: ...
vue路由传参两种方式；vue路由传参query与params区别；vue路由跳转的带参与不带参,路由跳转传参方式：name 、 path；
vue项目的路由传参常用的有两种方式:query和params 1.query传参特点:1.1可以用path也可以用name传递路径注意name是路由页面vue文件的名称不需要/1.2跳转页面地址 ...
react更改路由入参_JavaScript基础教程 react router路由传参
本篇教程介绍了JavaScript基础教程 react router路由传参,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入. < 今天,我们要讨论的是react ...
vue路由+ elementUI表格组件：loop文章列表页enter内容页（vue路由传参userid）- 代码篇
elementUI表格组件,response.data.newsLists列表如何循环出来?如何点击传参numId,并进入对应的内容页? 本文意图: 使用官方table组件:实现API调用:文章遍历. ...
id vue2路由传参_Vue2.0中 $route 和 $router 的区别
在做Vue项目时,在路由设置和跳转时有没有遇到过 $route 和 $router?乍一看,两个看起来几乎一模一样,有点傻傻分不清楚,他们到底有什么区别?在什么情况下用呢? 我们把这2个在控制台打印出 ...

uniapp页面路由传参

uniapp页面路由传参相关推荐

最新文章

热门文章