页面切换及参数传递
在课程的大纲
- 通过组件a切换页面和传递参数
- 通过接口router切换页面和传递参数
- 接收参数
- 回传参数
通过组件a切换页面和传递参数
组件a可通过配置href属性跳转到应用内的页面
<template>
<div class="tutorial-page">
<!-- 以 ’/‘开头的应用内页面的路径 -->
<a href="/PageParams/receiveparams">跳转到接收参数页面</a>
<!-- 以非'/'开头的应用内页面的名称 -->
<a href="PageParams/receiveparams">跳转到接收参数页面</a>
<!-- 特殊的，如果url的值是 '/',则跳转到path为'/'的页，没有则跳转到首页 -->
<a href="/">跳转到首页</a>
</div>
</template>
通过组件a实现页面切换时，可以通过‘?key=value’的方式添加参数，支持参数为变量
<template>
<div class="tutorial-page">
<!-- 添加参数 -->
<a href="/PageParams/receiveparams?key=Hello, world!">携带参数key1跳转</a>
<!-- 添加变量参数 -->
<a href="PageParams/receiveparams?key={{title}}">带参数key1跳转</a>
</template>
通过接口router切换页面和传递参数
切换页面
router接口在使用前，需要先导入模块
router.push(OBJECT)支持的参数url与组件a的href属性完全一致
router.replace(OBJECT)的支持的参数url不支持调起电话、短信、邮件，其他与push一致
<template>
<div class="tutorial-page">
<input class="btn" type="button" value="跳转到接收参数页面" onclick="routerPagePush"></input>
<input class="btn" type="button" value="跳转到接收参数页面,当前页面无法返回" onclick="routerPageReplace"></input>
<input class="btn" type="button" value="返回上一页" onclick="routerPageBack"></input>
<input class="btn" type="button" value="清空页面记录，仅保留当前页面" onclick="routerPageClear"></input>
</div>
</template>
<script>
// 导入模块
import router from '@system.router'
export default {
onInit () {
this.$page.setTitleBar({ text: '接口router切换页面' })
},
routePagePush () {
// 跳转到应用内的某个页面
router.push({
uri: '/PageParams/receiveparams'
})
},
routePageReplace () {
// 跳转到应用内的某个页面，当前页面无法返回
router.replace({
uri: '/PageParams/receiveparams'
})
},
routePageBack () {
// 返回上一页面
router.back()
},
routePageClear () {
// 清空所有历史页面记录，仅保留当前页面
router.clear()
}
}
</script>
传递参数
router接口的参数params可配置页面跳转时需要传递的参数
<template>
<div class="tutorial-page">
<input class="btn" type="button" value="携带参数跳转页面" onclick="routerPagePushWithParams"></input>
<input class="btn" type="button" value="携带参数跳转页面,当前页面无法返回" onclick="routerPageReplaceWithParams"></input>
</div>
</template>
<script>
// 导入模块
import router from '@system.router'
module.exports = {
onInit() {
this.$page.setTitleBar({text: '接口 router 切换页面'})
},
routerPagePushWithParams() {
// 跳转到应用内的某个页面
router.push({
uri: '/PageParams/receiveparams',
params: {key: this.title}
})
},
routerPageReplaceWithParams() {
// 跳转到应用内的某个页面,当前页面无法返回
router.replace({
uri: '/PageParams/receiveparams',
params: {key: this.title}
})
}
}
</script>
接收参数
组件a和接口router传递的参数的接收方法完全一致：在页面的ViewModel的protected属性中声明使用的属性
注意：
- protected内定义的属性，允许被应用内部页面请求传递的数据覆盖，不允许被应用外部请求传递的数据覆盖
- 若希望参数允许被应用外部请求传递的数据覆盖，请在页面的ViewModel的public属性中声明使用的属性
<template >
<div class="tutorial-page">
<text>page</text>
<!-- template中显示页面传递的参数 -->
<text>{{key}}</text>
</div>
</template>
<script>
module.exports = {
protected: {
key: ''
},
onInit() {
this.$page.setTitleBar({text: '接收参数'})
// js中输出页面传递的参数
console.info('key: ' + this.key)
}
}
</script>
回传参数
假设存在页面A和页面B，先从页面A跳转至页面B，然后从页面B返回到页面A时，需要传递参数
此时，组件a和接口router传参不能满足需求，可以借助于app级别的对象：this.$app.$data
接收参数
<template>
<div class="tutorail-page">
<a href="/PageParams/returnParams/pageb">跳转到页面B</a>
<text>{{msg}}</text>
</div>
</template>
<script>
export default {
private: {
msg: ''
},
onInit() {
this.$page.setTitleBar({text:'页面A'})
},
onShow() {
// 页面被切换显示时，从数据中检查是否有页面B传递过来的数据
if (this.$app.$data.dataPageB && this.$app.$data.dataPageB.gotoPage === 'pageA') {
// 从数据中获取回传给本页面的数据
const data = this.$app.$data.dataPageB.params
this.msg = data.msg
}
}
}
</script>
传递参数
<template>
<div class="tutorail-page">
<text>页面B</text>
<input style="width:450px;" placeholder="请输入回传页面A的数据" onchange="updateMsg"/>
</div>
</template>
<script>
export default {
private: {
msg: ''
},
onInit() {
this.$page.setTitleBar({text: '页面B'})
},
onHide() {
// 切换页面隐藏时，将要传递的数据对象写入
this.$app.$data.dataPageB = {
gotoPage: 'pageA',
params: {
msg: this.msg
}
}
},
updateMsg(e) {
// 更新input输入的信息广本
this.msg = e.text
}
}
</script>
