路由
页面不刷新实现页面切换效果,用于开发单页应用
使用模块
选项参数
# path
功能:路径匹配规则,冒号为动态参数名
类型:{String}
默认:null
必填:✔
# level
功能:路径匹配等级
类型:{Number}
默认:2
说明:取值分别为0、1、2、3。当值为0时url(#!后面路径)必须满足匹配条件,参数不能少;当值为1时允许url少参数,但不能无参数;当值为2时允许url不传参数;当值为3时表示url包含path非参数部分。
# entry
功能:是否为入口页面
类型:{Boolean}
默认:false
说明:页面中只能设置一个入口;当url不满足path规则时,会自动跳转到入口页面
# container
功能:渲染容器
类型:{String, Object} 选择器、DOM、jQuery对象
默认:null
必填:✔
说明:wrapper元素所在容器
# target
说明:绑定元素
类型:{String, Object} 选择器、DOM、jQuery对象
默认:null
说明:该元素必须已存在,并且包含href属性,且满足path规则
# wrapper
功能:路由实例内容是否独占一个容器(框架自动为内容创建一个<div class="nui-router-wrapper" />容器,这里简称为wrapper元素吧)
类型:{Boolean, Selector}
默认:false
说明:值为false时,所有设置该值的路由实例内容都将共享一个容器,每次加载都会触发onInit回调;当值为true时,实例会独占一个容器,仅在第一次加载时会触发onInit回调;也可以手动设置wrapper元素,即值为选择器时,元素必须包含类名nui-router-wrapper,且是container的子元素。
# data
功能:模版渲染数据
类型:{Object}
默认:{}
功能:默认值包含path(路由地址),url(包含动态参数路由地址),query(路由查询参数,“?”后面的参数),params(路由参数,包含查询参数与动态参数),默认值不可手动修改。
# template
功能:渲染模版
类型:{String, Object}
默认:''
说明:当值为对象(多个模版)时,必须存在名称为main模版作为主模版,模版中可以直接访问data中数据
# events
# onBefore
功能:target点击触发,若返回false将不执行后续操作
类型:{Function}
默认:null
参数:change {Function} 调用后会强行切换路由地址
# onData
功能:接收数据时回调
类型:{Function}
默认:null
参数:data {Anything} 接收数据
说明:配合类方法location使用
# onChange
说明:路由地址切换后触发回调
类型:{Function}
默认:null
说明:在渲染模版之前触发,函数返回false时则不会执行渲染模版,不会触发onInit和onAfter
# onRender
说明:渲染模版后触发
类型:{Function}
默认:null
说明:每次调用实例的render方法都会触发
# onInit
说明:渲染模版后触发
类型:{Function}
默认:null
说明:当选项参数wrapper为true时仅会触发一次
# onAfter
说明:渲染模版后触发
类型:{Function}
默认:null
说明:不论选项参数wrapper是何值都触发
# 说明
在选项参数函数中可以通过this.element访问到页面容器的jquery实例(类名为nui-router-wrapper的元素),绑定事件必须代理为该元素。万万不可将事件代理到页面加载就存在的元素上,比如documeng或者body,因为每次切换路由都会触发回调导致事件被多次绑定!
实例方法
# render
功能:渲染模版,调用后会触发onRender回调,该方法一般在onInit中异步请求数据后调用
类型:{Function}
类方法
# start
功能:初始化了路由跳转到主入口页面
类型:{Function}
# location
功能:路由跳转,跳转的地址必须匹配已设置的路由规则,否则不会跳转
类型:{Function}
参数:url {String} 跳转地址
参数:data {Anything} 跳转传递数据,跳转后的页面通过onData函数可接收
参数:render {Boolean} 是否重新渲染目标页面
# forward
功能:前进,等同history.forward,可无需手动调用该方法,在元素添加类属性nui-router-forward即可
类型:{Function}
参数:index {Number} 要访问的url在历史记录的位置
# back
功能:返回,等同history.back,可无需手动调用该方法,在元素添加类属性nui-router-back即可
类型:{Function}
参数:index {Number} 要访问的url在历史记录的位置