标签：
了解如何打开页面、回退，并传递参数
组件 a 切换页面
切换页面
组件 a 可通过配置 href 属性跳转到应用内的页面
示例如下：
<template>
<div class="tutorial-page">
<!-- 以'/'开头的应用内页面的路径 -->
<a href="/PageParams/receiveparams">跳转到接收参数页面</a>
<!-- 以非'/'开头的应用内页面的名称 -->
<a href="PageParams/receiveparams">跳转到接收参数页面</a>
<!-- 特殊的,如果uri的值是'/',则跳转到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}}">携带参数key2跳转</a>
</div>
</template>
<style>
.tutorial-page {
flex-direction: column;
justify-content: center;
align-items: center;
}
a {
margin-top: 75px;
font-size: 30px;
color: #09ba07;
text-decoration: underline;
}
</style>
<script>
export default {
data: {
title: 'Hello, world!',
},
onInit() {
console.log('组件a切换页面并传递参数')
},
}
</script>
接口 router 切换页面
切换页面
router 接口在使用前，需要先导入模块
router.push(OBJECT) / router.replace(OBJECT) 支持的参数 uri 与组件 a 的 href 属性完全一致
示例如下：
<template>
<div class="tutorial-page">
<input class="btn" type="button" value="跳转到接收参数页面" onclick="routePagePush"></input>
<input class="btn" type="button" value="跳转到接收参数页面，当前页面无法返回" onclick="routePageReplace"></input>
<input class="btn" type="button" value="返回上一页" onclick="routePageBack"></input>
<input class="btn" type="button" value="清空页面记录，仅保留当前页面" onclick="routePageClear"></input>
</div>
</template>
<style>
.tutorial-page {
flex-direction: column;
justify-content: center;
align-items: center;
}
.btn {
width: 550px;
height: 86px;
margin-top: 75px;
border-radius: 43px;
background-color: #09ba07;
font-size: 30px;
color: #ffffff;
}
</style>
<script>
// 导入模块
import router from '@blueos.app.router'
export default {
onInit () {
console.log('接口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="routePagePushWithParams"></input>
<input class="btn" type="button" value="携带参数跳转页面，当前页面无法返回" onclick="routePageReplaceWithParams"></input>
</div>
</template>
<style>
.tutorial-page {
flex-direction: column;
justify-content: center;
align-items: center;
}
.btn {
width: 550px;
height: 86px;
margin-top: 75px;
border-radius: 43px;
background-color: #09ba07;
font-size: 30px;
color: #ffffff;
}
</style>
<script>
// 导入模块
import router from '@blueos.app.router'
export default {
data: {
title: 'Hello, world!'
},
onInit () {
console.log('接口router切换页面并传递参数')
},
routePagePushWithParams () {
// 跳转到应用内的某个页面
router.push({
uri: '/PageParams/receiveparams',
params: { key: this.title }
})
},
routePageReplaceWithParams () {
// 跳转到应用内的某个页面，当前页面无法返回
router.replace({
uri: '/PageParams/receiveparams',
params: { key: this.title }
})
}
}
</script>
接收参数
现在，开发者已经掌握了通过组件 a 和接口 router 在页面之间传递参数的方法，如何接收参数呢？
其实很简单，组件 a 和接口 router 传递的参数的接收方法完全一致：在页面的 ViewModel 的data属性中声明使用的属性
示例如下：
<template>
<div class="tutorial-page">
<text>page</text>
<!-- template中显示页面传递的参数 -->
<text>{{key}}</text>
</div>
</template>
<style>
.tutorial-page {
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
<script>
export default {
data: {
key: '',
},
onInit() {
console.log('接收参数')
// js中输出页面传递的参数
console.info('key: ' + this.key)
},
}
</script>标签： 来源：
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。