路由

页面不刷新实现页面切换效果,用于开发单页应用

使用模块

在页面中创建元素,并包含href属性,并且创建一个空元素作为渲染容器

下载 路由组件作为依赖项引入到模块中,并创建实例,查看 demo

选项参数

# 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

功能:绑定事件,用法参考代理事件

类型:{Object}

默认值:null

# 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在历史记录的位置