配置路由
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)