2.1.8 • Published 7 years ago

pt_router v2.1.8

Weekly downloads
8
License
ISC
Repository
-
Last release
7 years ago

#pt_router

依赖 jquery 或 zepot 等js 库 支持vue 组件 交流QQ群: 279884905

路由模板

ptRouter 前端路由模板支持字符串类型模板{template:'<div></div>'},文件类型模板{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('路由容器选择器',选项)
  • 链接 <a href="#/mycenter" pt-router >链接</a> 
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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello word示例</title>
    <script src="/js/zepto.min.js"></script>
    
    <script src="pt-router.js"></script>
</head>
<body>
<div>
    <a href="#/a" pt-router>A页面</a>
    <a href="#/b" pt-router >B页面</a>
</div>
<div id="pageContainer"></div>
</body>

<script>
    $( function () {
        Vue.use( ptRouter );
        var router = new ptRouter();
      
        router.map( {
            name:'a',
            url:'/a',
            template:'<div>我是a页面</div>'
        } );
        router.map( {
            name:'b',
            url:'/b',
            templateUrl:'/b.html'
        } );
        router.init( '#pageContainer' ,{toggleAnimation:false});
    } );
</script>
</html>

b.html 模板文件

<div>
    我是B页面,来自url类型的模板
</div>

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:'<div>默认页面</div>'
        } );

错误404路由 error404()

[v0.5+]

  router.error404( {
            name:'404',
            url:'/404.html',
            template:'<div>页面不存在</div>'
        } );

vue 实例模板文件内容

  • Vue 实例模板文件以.vue 后缀结尾的文件。
  • 通过路由实例map()方法指定的vue 模板文件，将会被当作vue实例处理。
  • ptRouter.vue=new Vue( {data: {title: ''}} ); 创建Vue实例,并被注册到ptRouter中ptRouter.useComponentUrl = [ ] 加载子组件url数组
  • vue 实例方法中获取当前ptRouter 实例 this.$options.methods.getPtRouter()。
<template>
</template>
<style>
</style>
<script>
    //ptRouter页面vue实例写法，vue实例会挂载到对应的路由页面
    ptRouter.vue=new Vue( {data: {title: ''}} );
    //子组件加载方法
</script>

vue组件模板文件内容

组件的定义：在 <scritp>ptRouter.vueComponent = {props:{'title':''}};</script> 来定义一个组件，ptRouter 自动把此组件注册到vue实例下。

<template>
</template>
<style>
</style>
<script>
    ptRouter.vueComponent = {props:{'title':''}};
</script>

在Vue组件模板里引用子组件

在Vue模板文件里通过 ptRouter.useComponentUrl = [ ] 数组存放的是vue组件url路径，引用子组件，组件名称模板文件名 ptRouter.useComponentUrl = [ '/component/headerNav.vue' , '/component/weui/panel.vue' ]; 引用了两个子组件, 这两个子组件会自动注册当前模板的组件下,使用标签 <header-nav></header-nav>， <panel></panel> 使用子组件

  • 在组件方法中获取当前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+]可用
vuerouterptrouter
@everything-registry/sub-chunk-2489
2.1.8

7 years ago

2.1.7

7 years ago

2.1.6

7 years ago

2.1.5

7 years ago

2.1.4

7 years ago

2.1.3

7 years ago

2.1.2

7 years ago

2.1.1

7 years ago

2.1.0

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago