视图路由控制 | Light文档

路由注册

light框架提供两种方式注册路由：
1）在index.html中注册<view>标签，<view>的id属性即代表了在最终路由当中的位置，可以直接通过这个id属性访问到对应的视图；
2）在app.js中，执行 Light.start() 之前使用Light.route()或Light.routes()手动注册路由。
注：在手动注册的同时保证至少有一个使用定义的路由，两种方式定义的路由不能重复；如需将同一视图文件注册为不同的路由，仅支持异步方式。

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
})

除了上述内置属性外，还可以传入自定义属性（不可使用上述内置属性以及 component,path,name 属性），可以在路由拦截器中的 from 或 to 的 meta 字段中查看。不允许在父视图上配置自定义属性。

Light.routes

注册多个路由。

Light.routes([view,view])

参数列表

{array} views 视图列表

其中的每一项和Light.route(view)中的view一致。

路由跳转

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	说明
http://xxx.lightyy.com/index.html	以Web容器的方式打开远程的http地址的index.html文件
http://xxx.lightyy.com/app.native.js	以JSNative容器的方式打开远程的http地址的app.native.js文件
http://xxx.lightyy.com/app.miniapp.js	以LightWeb或MiniAPP容器的方式打开远程的http地址的app.miniapp.js文件
xxx.vhost.light.com/index.html	以Web容器的方式打开离线包xxx地址的index.html文件
xxx.vhost.light.com/app.native.js	以JSNative容器的方式打开离线包xxx地址的app.native.js文件
xxx.vhost.light.com/app.miniapp.js	以LightWeb容器的方式打开离线包xxx地址的app.miniapp.js文件
vhost://xxx/index.html	以Web容器的方式打开离线包xxx地址的index.html文件（xxx是离线包虚拟域名的前缀，即离线包ID）
vhost://xxx/app.native.js	以JSNative容器的方式打开离线包xxx地址的app.native.js文件（xxx是离线包虚拟域名的前缀，即离线包ID）
gmu://feedback	打开原生的feedback （反馈）组件
gmu://miniapp	打开MiniAPP容器，需要传入Light平台对应的小程序id
gmu://web?startPage=http%3A%2F%2Fxxx.lightyy.com%2Findex.html&title=mytitle	打开Web容器，startPage参数表示要打开的地址，下文提到的options参数用&直接拼在地址后面即可
gmu://jsnative?startPage=http%3A%2F%2Fxxx.lightyy.com%2Fapp.native.js&title=mytitle	打开JSNative容器，startPage参数表示要打开的地址，下文提到的options参数用&直接拼在地址后面即可

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.query和params都是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.disableSwipeGestureBack

options.disableSwipeGestureBack 禁止iOS的滑动手势返回功能。

options.animationType

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

options.navBarType

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

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

options.navBarStyle

options.navBarStyle用于打开新容器时，设置新容器的导航样式。

navBarStyle:"{\"backgroundColor\": \"#000000\"}"   //设置导航栏背景色

navBarStyle:"{\"titleColor\": \"#000000\"}"   //设置导航栏文字颜色

navBarStyle:"{\"backButton\": \"back1\"}"   //设置导航栏返回按钮的图标 back1为路径 /native/res/icon/back1.png  下的图片，传文件名即可

options.statusBarStyle

options.statusBarStyle用于打开新容器时，设置新容器的状态栏字体颜色。

statusBarStyle:"black"   //black：黑色，white：白色

options.disableHTMLTitle

options.disableHTMLTitle H5环境中不显示index.html页面中导航栏的title。

disableHTMLTitle:true   //true不显示，默认显示

options.miniappContainer

options.miniappContainer 表示以何种容器打开小程序页面。
对于远程地址，值可选 lightweb 或 miniapp；对于离线包地址，值可选 lightweb。

miniappContainer: 'lightweb'   //以LightWeb的形式打开小程序

代码示例

Light.navigate("user/info/avatar", 
    {
        userId:"19901010",
        name:"someone",
        age:10
    }, {
        title:"用户资料",
        history: true,
        replace: false,
        animationType: "bottom",
        navBarType: 1,
        navBarStyle: "{\"backgroundColor\": \"#000000\"}" 
    }
)

H5项目访问方式：

Light.navigate("vhost://tstvhost/index.html#/index/home",{title:'标题'})

JSNative项目访问方式：

Light.navigate("vhost://vhostjsn/app.native.js#/index",{title:'标题'})

以LightWeb的形式打开离线包小程序：

Light.navigate("xxxx.vhost.light.com/app.miniapp.js", 
    {
        userId:"19901010",
        name:"someone",
        age:10
    }, {
        miniappContainer:'lightweb'
    }
)

打开独立窗体的小程序：

Light.navigate("gmu://miniapp", 
    {
        id: 'xxxxxxxxxx'  //Light平台对应的小程序id
    }
)

路由回退

light框架提供两种方式处理路由的回退：1）调用 LightSDK.native.back() ；2）调用 Light.navigateBack()，兼容以下几种情况：

在jsn环境下回退到页面栈中的某个页面；
在web环境下回退到页面栈中的某个页面；
在lightApp中打开一个h5页面，该h5页面内调用此方法可以实现回退到h5页面栈中的某一个页面，当要返回的页数大于历史记录的长度时，关闭当前的Web容器。

接口签名如下：

Light.navigateBack(number)

参数列表

{number} number 要返回的页面数，默认值为1

代码示例

Light.navigateBack(1);