视图的概念和定义

视图是light工程的一个十分重要的概念,也是light工程中最基本业务组织单元,是一条业务流程链路上的最小单位。

可配置属性

视图在light工程中,必须定义在index.html中,light提供了不同的属性来标识视图的特性。

属性 类型 说明
id string 视图ID,关联了视图在路由层上的位置和资源树中文件的命名
home boolean 定义当前视图是否为主视图,主视图是应用默认访问时打开的视图
parent string 定义当前视图的父视图,主要用来处理嵌套关系,实现子父级路由
async boolean 定义当前视图是否是异步视图,当异步视图时视图的资源不出现在应用默认访问的构件文件中而是随访问路径而加载
chunkname string 定义当前异步视图编译后的文件名称,仅当async为true时生效

view标签除了支持上述内置属性外,还支持用户的自定义属性(不可使用上述内置属性以及 component,path,name 属性),可以在路由拦截器中的 from 或 to 的 meta 字段中查看。不允许在父视图上配置自定义属性。

父子视图

如果需要定义嵌套视图,可以采用如下的方式:这种方式定义了3个视图,其中demo是父视图,demo/ademo/b分别是两个子视图,其中demo/a为当前应用的主视图,home属性可以不配置,默认以第一个视图为准,如果配置多个以最后一个home视图为准!

index.html
<view id="demo"/>
<view id="demo/a" parent="demo" home="true"/>
<view id="demo/b" parent="demo"/>

配置完成后在demo视图增加<sub-view>,子视图会出现在<sub-view/>所在的位置。

view/demo.vue
<template>
<div>
Hello,World !
<sub-view/>
</div>
</template>
<script>
export default {
data(){
return {};
},
props:[]
}
</script>
<style lang="less">
</style>