路由之vipspa.js开端明白

2019年8月25日 287次阅读 来源: 李红

## 在这里申明这些仅是个人明白，仅供参考 ##

近来做了一个项目，在这个项目顶用到了路由，这是我初次打仗路由，觉得这是前端开辟中必须要相识的一个插件。该插件是：vipspa.js
## 援用 ##
该插件的援用很简朴，和平常的插件的援用一样，条件是必需援用jqury。
## 运用 ##
运用也是相称简朴，主如果div和js的合营，款式在这里不多说，依据本身的页面需求设想页面即可。
*div*
在div内里须要一个列表，来示意本身须要跳转页面的差别的分类，在这个列表内里须要运用`a`标签，实例以下：

<ul style="width: 100px;float: left">
    <li><a href="#/sy">首页</a></li>
    <li><a href="#/one">页面一</a></li>
    <li><a href="#/two">页面2</a></li>
    <li><a href="#/three">页面3</a></li>
    <li><a href="#/four">页面4</a></li>
</ul>

同时，还须要一个运用一个标签来举行跳转内容的展现
<div style="width: 590px;height:400px;border:1px solid blue" id="content">

    </div>
*js*
在js文件内里须要设置本身依据差别的列表项挑选跳转的页面，先说代码：
vipspa.start({
            view: '#content',// 页面路由的div
            router: {
                '/sy': {
                    templateUrl: 'webApp/v1/v1.html',
                    controller: 'webApp/v1/v1.js'
                },
                '/one': {
                    templateUrl: 'webApp/v2/v1.html',
                    controller: 'webApp/v2/v1.js'
                },
                '/two': {
                    templateUrl: 'webApp/v3/v1.html',
                    controller: 'webApp/v3/v1.js'
                },
                '/three': {
                    templateUrl: 'webApp/v4/v1.html',
                    controller: 'webApp/v4/v1.js'
                },
                'defaults': '/sy'     
            },
            errorTemplateId: '#error'//毛病显现页面
        });

view:须要展现内容的部份
templateUrl：跳转页面的URL
controller：掌握该跳转页面的js文件
defaults：当其他页面跳转失足时，默许跳转到的页面

以上就是vipspa.js的简朴运用，固然这个仅仅是简朴的援用运用，路由还能够举行参数的通报。这个会在今后的文章内里举行申明。

github上面有插件下载和该插件的一些要领，点击这里
愿望对做WEB体系的童靴有协助！

    原文作者：李红
    原文地址: https://segmentfault.com/a/1190000010142043
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞