pt_router

v2.1.8

Published

2 years ago

vue 第三方路由 ,解决vue-router 的一些不足，在vue项目中使用pt_router 可以事件灵活的控制页面

Downloads

0High
0Medium
0Low

pantian

vue router ptrouter

#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+]可用

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

路由模板

版本

2.0 支持vue2.0+

1.0 支持vue 1.0+

Vue 页面应用

初始化选项 opt

回调方法选项

属性选项

初始化方法示例

路由映射map()方法选项

关闭当前页面

路由链接

快速 hello word

Vue 扩展事件方法

路由参数

默认路由 default();

错误404路由 error404()

vue 实例模板文件内容

vue组件模板文件内容

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

加载页面

通过路由名称加载页面 [v0.3+]

通过url加载[v0.2+]

引用外部javascript文件

通过url加载`[v0.2+]`