#pt_router
>依赖 jquery 或 zepot 等js 库
>支持vue 组件
> 交流QQ群: 279884905
## 路由模板
>ptRouter 前端路由模板支持字符串类型模板`{template:''}`,文件类型模板`{templateUrl:'/tpl/index.html'}`,文件模板优先级高于字符串模板。
>文件模板在路由初始化时并且没有被加载，只有页面被创建时，对应的路由才被同步下载加载到路由页面内容中，并显示出来。
## 版本
## 2.0 支持vue2.0+
- 2.1 添加back后退事件
- closeCurrentPage,loadByName,load 方法可以通过vue实例调用
- 2.0 添加页面级组件基路径目录,子组件文件基路径
## 1.0 支持vue 1.0+
- 0.5 , 2.0 添加默认路由，404路由
- 0.4+ 支持webpack 加载组件，依赖vue-loader
- 0.3* 一个页面一个vue实例模式
- 0.2* 前端http加载组件
## Vue 页面应用
> 一个页面对应一个vue实例
## 初始化选项 opt
### 回调方法选项
- `opt.goBack` 后退事件,返回false ，ptRouter 路由不切换，但浏览器的后退事依然进行。
- `opt.goPrevious` 前进事件，返回false ,ptRouter 路由不切换，但浏览器的前进事依然进行。
- `opt.initBefore` 路由初始化回调，在页面显示之前调用
- `opt.pageLoadBefore` 全局方法，页面显示之前回调,返回false 页面不显示
- `opt.pageLoaded` 全局方法，页面已显示之后回调
- `opt.pageCreated` `[v0.5+]` 页面创建后回调，传进来的是页面DOM对象，此时可以对页面的样式进行控制
- `opt.notBack ()` 当前历史记录状态的index为1时，后退事件触发回调事件。
### 属性选项
- `opt.TagEventSelector='a[pt-router]'` 链接事件元素选择器
- `opt.separator='#'` 路由分隔符
- `opt.container={top:0,left:0,right:0,bottom:0}` 路由页面容器定位,在路由容器在position: absolute下才有效
- `opt.toggleSpeed ` 页面切换时间长，毫秒为单位
- `opt.vueComponents=[]` 加载全局Vue组件
> - `[v0.3+]` vue 模板路径数组，在初始化时，自动加载到vue全局组件
> - `[v0.4+]` 全局组件支持两种加载方式
- 1： url 方式:opt.vueComponents=['test.vue'];
- 2： 直接vue组件方式：opt.vueComponents={'componentName':component}，适用于webpack环境
- `opt.vueComponentBasePath=''` `[v2.0]`//vue子组件基目录设置，在加载组件时，会与此路径为根目录上加载
- `opt.toggleAnimation =false ` 切换动画效果`[v0.3可用]`
```
import Vue from 'vue'
import $ from 'n-zepto'
import App from './App'
import routerMap from './router';
import ptRouter from './Lib/pt-router';
import about from './views/about.vue';
Vue.use( ptRouter );
var router = new ptRouter();
//console.log( new Vue( App ) );
router.map( {
name : 'index' ,
url : '/' ,
vueComponent : App //
} );
router.init( '#app' , { vueComponents : { 'about' : about} } );
```
- `opt.toggleAnimation =false ` 切换动画效果`[v0.3可用]`
## 初始化方法示例
- router.init('路由容器选择器',选项)
- 链接 `链接`
```
var router = new ptRouter();
router.map( {
name:'mycenter',
url:'/mycenter',
templateUrl:'/mycenter.vue'
} );
router.init( '#pageContainer',{container:{},vueComponents:[/*'/component/headerNav.vue'*/],toggleSpeed:200} );
```
## 路由映射map()方法选项
**选项属性**
- `name` 路由名称，只能存在一个，如有同名映射，将会被忽略
- `url` 路由匹配, 支持正则, 如：url=/index/:id/name ,那么访问 #/index/2/hello , 那么会参数 id=2,name=hello
- `templateUrl` 模板url
- `notHistory` 是否无浏览器历史记录，默认false 有记录,true 无记录
- `vue` Vue对象
**回调事件**
- `pageLoadBefore` 页面加载之前回调,参数路由数据
- `pageLoaded` 页面加载成功之后回调，参数路由数据
- `pageInit` `[v0.5+]` 页面初始化回调，参数路由数据，无须返回值
```
router.map( {
name:'mycenter',//路由名称
url:'/mycenter',//路由url
templateElement:'#page1'//路由模板内容，元素选择器
templateUrl:'',//模板路径
pageToggleAnimate:false,//禁用切换动画
notHistory:true //不加到历史记录
//页面初始化事件,只调用一次
pageInit:function () {
},
//页面加载前事件，返回flase 则停止加载事件
pageLoadBefore:function () {
},
//页面加载完成事件
pageLoaded:function (routerData) {
}
} );
```
## 关闭当前页面
`ptRouter.closeCurrentPage()` 无参数
## 路由链接
> ptRouter 路由我的A链接，A链接必有加上ptRouter 指定的属性后，路由链接才会生效。默认路由链接属性为 `pt-router`,
> 也可以在初始化时通过`TagEventSelector`选项修改这个属性值
## 快速 hello word
```html
hello word示例
```
> b.html 模板文件
```
我是B页面,来自url类型的模板
```
## Vue 扩展事件方法
- `ptRouterLoad` 路由页面显示时回调事件,参数为路由数据
- `ptRouterHidePage` 路由页面被隐藏完成时回调事件,参数为路由数据
- `ptRouterBeforeLoad` `[v0.5+]` 页面显示/挂载到dom之前回调的方法
```
new Vue({
ptRouterLoad:function(routerData){},
ptRouterHidePage:function(routerData){}
ptRouterBeforeLoad:function(routerData){}
})
```
## 路由参数
> 有路由参数与原URL参数两种，路由参数覆盖原URL参数
> 如：`/home?name=name1&type=2#/movie?name=router_name`
> 原URL参数 `/home?name=name1&type=2` , ptRouter参数： `#/movie?name=router_name`
> 通过ptRouter解析得到的参数：`{name:router_name,type:2}`
## 默认路由 default();
`[v0.5+]`
```
router.default( {
name:'default',
url:'/default',
template:'默认页面
'
} );
```
## 错误404路由 error404()
`[v0.5+]`
```
router.error404( {
name:'404',
url:'/404.html',
template:'页面不存在
'
} );
```
## vue 实例模板文件内容
- Vue 实例模板文件以.vue 后缀结尾的文件。
- 通过路由实例map()方法指定的vue 模板文件，将会被当作vue实例处理。
- `ptRouter.vue=new Vue( {data: {title: ''}} );` 创建Vue实例,并被注册到ptRouter中`ptRouter.useComponentUrl = [ ]` 加载子组件url数组
- vue 实例方法中获取当前ptRouter 实例 `this.$options.methods.getPtRouter()`。
```
```
## vue组件模板文件内容
> 组件的定义：在 `ptRouter.vueComponent = {props:{'title':''}};` 来定义一个组件，ptRouter 自动把此组件注册到vue实例下。
```
```
## 在Vue组件模板里引用子组件
> 在Vue模板文件里通过 `ptRouter.useComponentUrl = [ ]` 数组存放的是vue组件url路径，引用子组件，组件名称模板文件名
> `ptRouter.useComponentUrl = [ '/component/headerNav.vue' , '/component/weui/panel.vue' ];` 引用了两个子组件,
> 这两个子组件会自动注册当前模板的组件下,使用标签 `， ` 使用子组件
- 在组件方法中获取当前ptRouter 实例 `this.$root.$options.methods.getPtRouter();`
## 加载页面
> ptRouter 提供两种加载新页面的方法
### 通过路由名称加载页面 [v0.3+]
- `ptRouter.loadByName(routerName,params)` routerName 路由名称，params 自定义参数，将被赋给 `RouterData.callParams` 对象中。
>**参数params说明** [v0.4+]`params.urlParams` 固定为路由参数对象，自动转`a=a&b=b` 形式的加到路由url之后。
`ptRouter.loadByName(routerName,{urlParams:{a:"a",b:"b"}})` ,最后访问为 `#/index?a=a&b=b`
### 通过url加载`[v0.2+]`
- `ptRouter(实例对象).load("/index")` 参数：url
## 引用外部javascript文件
- `ptRouter.requireScript = [ '/js/test.js' ];` 保存要引用的script脚本url数组，相同script文件只会引用一次。 `[v0.3.1+]`可用