视图路由控制

路由注册

light框架提供两种方式注册路由:1)在index.html中注册<view>标签,<view>的id属性即代表了在最终路由当中的位置,可以直接通过这个id属性访问到对应的视图;2)在app.js中,执行 Light.start() 之前使用Light.route()手动注册路由。

Light.route(view)

参数列表

{string} view.path 视图id

{function} view.component 视图模块

引入视图模块的文件,此文件必须存在于项目路径中。

同步视图:component: require(“视图文件路径”)

异步视图:
component: () => {
//可自定义异步视图的模块名称,格式为:页面名称-视图id
return import(/ webpackChunkName: “index-index-async” /“./view/index/async.vue”)
},

{string} view.parent 父视图id

{boolean} view.home 是否是主视图

代码示例


//注册同步视图
Light.route({
path: '/index/child',
component: require('./view/index/child.vue'),
parent: '/index'
})

//注册异步视图
Light.route({
path: '/index/async',
component: () => {
//可自定义异步视图的模块名称,格式为:页面名称-视图id
return import(/* webpackChunkName: "index-index-async" */"./view/index/async.vue")
},
parent: '/index',
private: 'true', //视图自定义属性
home: true
})

路由跳转

light框架中的路由跳转可以通过Light.navigate接口来实现。Light.navigate接口的签名如下:

Light.navigate(viewId,params,options)

参数列表

viewId

viewId即视图的id,被注册为<view id="index/my/info" />,那么,需要跳转到此视图时,可以直接使用Light.navigate("index/my/info")Light.navigate("#/index/my/info")

除了支持视图的跳转,navigate还支持页面相对路径的跳转:

  • index.html#/my/info
  • app.native.js#/my/info

另外,viewId还支持完整的带协议的地址,如以下的这几种情况:

以上的地址作为viewId被传入时,分别代表的意义为:

  • 以webview容器的方式打开远程的http地址的index.html文件
  • 以JSNative容器的方式打开远程的http地址的app.native.js文件
  • 打开原生的feedback (反馈)组件
  • 以webview容器的方式打开离线包xxx地址的index.html文件
  • 以JSNative容器的方式打开离线包xxx地址的app.native.js文件
  • 以webview容器的方式打开离线包xxx地址的index.html文件(xxx是离线包虚拟域名的前缀,即离线包ID)
  • 以JSNative容器的方式打开离线包xxx地址的app.native.js文件(xxx是离线包虚拟域名的前缀,即离线包ID)

params

params是视图的入参,当从A->B视图时,可以给B视图传递参数。

Light.navigate("B",{message:"hello"})

B视图有多种方法可以读取A视图传递过来的参数,以处理请求。

view/B.vue
<script>
export default {
data(){
},
methods:{
},
mounted(){
this.$route.query
},
afterShow(params){
},
beforeShow(params){
}
}
</script>

如上图所示的代码,this.$route.queryparams都是A视图传递过来的参数。

options.replace

options参数是传递给原生容器的入参,仅在APP内部运行时生效,用于控制APP容器的样式状态和行为。

options.replace用于判断打开新视图时是否要新打开容器。

options.replace在JSN环境和H5环境有不同的默认值。

  • H5渲染时默认值为true,也就是不打开新的容器,复用当前的容器。
  • JSN渲染时默认值为false,也就是使用新的容器,保持当前的容器状态不变。

options.history

options.history用于判断是否保留当前页面路由历史,默认值为true。当options.history为false时,将在当前的访问栈内清除本次的访问记录,回退页面或者视图时不会出现当前的信息。

history参数可以和replace配合使用以控制容器在历史栈的路径。

options.cache

options.cache用于判断是否保留被打开视图路由历史,默认值为true。当options.cache为false时,将在当前的访问栈内清除新视图访问记录,回退页面或者视图时不会出现新打开视图的信息。

cache参数可以和replace配合使用以控制容器在历史栈的路径。

options.title

options.title用于打开新容器时,可以对新的容器设置顶部的标题。仅在当前容器使用了原生的导航栏的情况下有效。

options.animationType

options.animationType用于打开新容器时,设置新容器进场动画方向设置(默认right),可以选择:top,bottom,left,right等。

options.navBarType

options.navBarType用于打开新容器时,设置新容器的导航栏状态。

  • navBarType:0——>不使用标题栏、状态栏(状态栏不占高度会浮在页面顶部,即页面通顶效果)
  • navBarType:1——>使用标题栏、状态栏(默认)
  • navBarType:2——>仅使用状态栏且状态栏占高度

options.navBarStyle

options.navBarType用于打开新容器时,设置新容器的导航样式和颜色。

navBarStyle:"{\"backgroundColor\": \"#000000\"}"

代码示例

Light.navigate("user/info/avatar", 
{
userId:"19901010",
name:"someone",
age:10
}, {
title:"用户资料",
history: true,
replace: false,
animationType:"bottom",
headHidden: true,
navBarType: 0
}
)
Light.navigate("vhost://tstvhost/index.html#/index/home",{title:'标题'})
Light.navigate("vhost://vhostjsn/app.native.js#/index",{title:'标题'})  //jsn项目访问方式