配置路由
manifest.router
(路由),用于定义页面的实际地址、跳转地址。如果 ux 页面没有配置路由,则不参与项目编译。一个目录下最多只能存在一个主页面文件(不包括组件文件)。
- entry:表示首页名称,若是没有配置entry属性默认pages第一个为首页路径。
"router":{ "entry": "首页页面目录名" }
- pages: 页面配置列表
"router":{ "pages": { "页面目录名": { "component": "与 ux 文件名保持一致" } } }
注意事项
-
[1] 一个目录下最多只能存在一个主页面文件(不包括组件文件)
src
— pages
— Test
— test.ux
— test2.ux如上文件在Test中存在 test.ux、test2.ux两个ux文件:
"router":{ "pages/Test": { "component": "test", "path": "/test1" }, "pages/Test": { "component": "test2", "path": "/test2" } }
此时会报错 Duplicate object key(重复配置),因为一个目录下最多只能存在一个主页面文件!因此test.ux 与test2.ux这两个文件不能都作为主页面文件
若是想给这两个文件均设置路由,需要修改路径,如下:
src
— pages
— Test
— test.ux
— test2
— test2.ux"router":{ "pages/Test": { "component": "test", "path": "/test1" }, "pages/Test/Test2": { "component": "test2", "path": "/test2" } }
路由导航
声明式-a组件
在快应用中可以通过 a组件
(类似vue中的link组件)进行声明式导航,不仅可以跳转到站内页面、还可以通过webView加载网页、掉起电话、短信、邮件…
<template>
<div class="wrapper">
<a href="/pages/Home">去首页1</a>
<a href="pages/Home">去首页2</a>
<a href="tel:10086">打电话</a>
<a href="sms:10086">发短信</a>
<a href="mailto:[email protected]">发邮件</a>
<a href="https://www.baidu.com/">打开webView加载网页</a>
</div>
</template>
路由跳转-router接口
在快应用中是通过router接口进行路由跳转的(类似vue中的router)
router接口提供一下几个方法进行路由跳转
router.push
方法
router.push(OBJECT)支持的参数 uri 与组件 a 的 href 属性完全一致
router.replace
方法
router.replace(OBJECT)的支持的参数 uri 不支持调起电话、短信、邮件,其他与 push 一致
router.back方法返回上一级
router.clear方法清空历史记录仅保留当前页面
<template>
<div class="wrapper">
<text @click='jump(1)'>去首页1</text>
<text @click='jump(2)'>去首页2</text>
<text @click='jump(3)'>打电话</text>
<text @click='jump(4)'>发短信</text>
<text @click='jump(5)'>发邮件</text>
<text @click='jump(6)'>打开webView加载网页</text>
</div>
</template>
<script>
import router from '@system.router'
export default {
jump(type){
let uri =''
switch(type){
case 1:
uri = '/pages/Home'
break;
case 2:
uri = 'pages/Home'
break;
case 3:
uri = 'tel:10086'
break;
case 4:
uri = 'sms:10086'
break;
case 5:
uri = 'mailto:[email protected]'
break;
case 6:
uri = 'https://www.baidu.com/'
break;
}
router.push({
uri
})
}
}
</script>
路由传参
传递参数
使用a组件或router接口进行路由跳转时----传递参数与接收参数方式一致。
- 若是通过a组件进行路由跳转时可以通过在uri上拼接**?key=value**的形式进行路由传参
<a src='xxx?key1=value1&key2=value2'>路由跳转</a>
- 若是通过router接口进行路由跳转则有两种方式
router.push({ uri:'xxx?key1=value1&key2=value2'})
router.push({ uri: 'xxx', params:{ key1: value1, key2: value2 } })
接收参数
- 路由跳转
jump(type){ router.push({ uri: '/pages/Home', params: { value: 222222 } }) }
- 目标页面接收: 需要先在
public或protected
中定义key名相同
的属性,否则接收不到!
onReady() { console.log(this.value) // 不先定义接收不到undefined }
public:{ value: '' }, onReady() { console.log(this.value) // 222222 }
protected 内定义的属性,允许被应用内部页面请求传递的数据覆盖,不允许被应用外部请求传递的数据覆盖
回传参数
可以通过在 app.ux 中增加缓存的数据,并提供读写缓存数据的能力来实现。
示例
页面跳转时走了哪些生命周期?
页面启动模式
页面的启动模式有两种,可以通过manifest.json配置文件的 router.page.launchMode
进行配置
"router":{
"pages/A":{
"launchMode": "standard"
}
}
-
standard(默认):每次打开新的目标页面(页面栈中会存在相同的目标页面)
-
singleTask:每次打开目标页面都会检查页面栈中是否存在目标页面:
若是存在[1]清除页面栈中该页面
上
打开的其他页面[2]打开已有的目标页面并回调 onRefresh 生命周期函数;若是不存在则创建新的目标页面实例并打开
只看上面解释会比较模糊,举例说明: 现在有A、B、C三个页面,页面的启动模式如下
"pages/A": {
"launchMode": "singleTask",
"component": "index"
},
"pages/B": {
"launchMode": "standard",
"component": "index"
},
"pages/C": {
"launchMode": "singleTask",
"component": "index"
}
现在使用router.push(左上角返回会有所不同哦)依次打开页面PageA -> PageB -> PageC -> PageB -> PageC -> PageA
下面结合生命周期进行说明
-
[1]PageA:当前页面栈为空,创建A页面并打开
-----A页面生命周期------ onInit onShow
此时页面栈: PageA
-
[2]PageB: PageB的启动模式为standard(每次打开新的页面), 创建B页面并打开
-----A页面生命周期------ onHide -----B页面生命周期------ onInit onShow
此时页面栈: PageA, PageB
-
[3]PageC:PageC的启动模式为singleTask,此时C页面为首次打开,创建C页面并打开
-----B页面生命周期------ onHide -----C页面生命周期------ onInit onShow
此时页面栈: PageA, PageB, PageC
-
[4] PageB: PageB的启动模式为standard(每次打开新的页面), 创建B页面并打开
-----C页面生命周期------ onHide -----B页面生命周期------ onInit onShow
此时页面栈: PageA, PageB, PageC, PageB
-
[5]PageC:PageC的启动模式为singleTask,找到页面栈中PageC,销毁PageC前面的页面即PageB
-----B页面生命周期------ onHide onDestory -----C页面生命周期------ onShow onRefresh
此时页面栈: PageA, PageB, PageC
-
[6]PageA:PageA的启动模式为singleTask,找到页面栈中PageA,销毁PageA前面的页面即PageB与PageC
-----C页面生命周期------ onHide onDestory -----C页面生命周期------ onDestory -----A页面生命周期------ onShow onRefresh
此时页面栈: PageA
返回按钮
若是页面栈中存在大于1个页面,则在页面左上角存在返回按钮。
点击返回按钮,会销毁当前页面
并打开上一级页面。
举例说明
现在存在页面Demo(首页), Home页面
- [1] 进入Demo页面
----Demo生命周期---- onInit onShow
- [2] 跳转至Home页面
----Demo生命周期---- onHide ----Home生命周期---- onInit onShow
- [3] 返回Demo页面
----Home生命周期---- onHide onDestory ----Home生命周期---- onShow(不会走onRefresh)