flutter 跳转页面传递参数 返回页面带参数
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flutter 跳转页面传递参数 返回页面带参数相关的知识,希望对你有一定的参考价值。
参考技术A 点击跳转 页面跳转后页面
还有另外一种
跳转页面
跳转接收页面
vue从一个页面跳转到另一个界面,带参数跳转
使用 编程式导航:
跳转:this.$router.push('/one')
有记录,可返回。
返回:this.$router.back()
-
方式1:path+query
this.$router.push( // 跳转到的页面路径 path: '/detailPage', // 传递的参数集合 query: detailData: data )
created() this.detailData = this.$route.query.detailData
-
方法2:name+params
this.$router.push( // 跳转到的页面名 name: 'detailPage', // 传递的参数集合 params: detailData: data )
created() this.detailData = this.$route.params.detailData
query与params的区别
相同点:都是Object类型
不同点:
query: 一个 key/value 对象,表示 URL 查询参数。例如,对于路径/4?age=21
,则有$route.query.age == 21
,如果没有查询参数,则是个空对象。地址栏中会显示传递的参数信息,因此这种方式不太安全。
params: 一个 key/value 对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象。注意
- name与params,path与query搭配使用
- 注意区分$router 与 $route
$router: 全局的 router 实例。通过 vue 根实例中注入 router 实例,然后再注入到每个子组件,从而让整个应用都有路由功能。
$route : 路由对象,表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息
解决使用name+params传参时,刷新页面,参数丢失的问题
- 路由配置
path: '/detailPage/:id', name: 'detailPage', component: Detail,
- 通过 $router.push 的 params 传参
toDetailPage(data) this.$router.push( name: 'detailPage', params: id: data.id ) ,
- 获取参数
created() const id = this.$route.params.id
以上是关于flutter 跳转页面传递参数 返回页面带参数的主要内容,如果未能解决你的问题,请参考以下文章