路由之vipspa.js初步理解

## 在这里说明这些仅是我的理解，仅供参考 ##

最近作了一个项目，在这个项目中用到了路由，这是我首次接触路由，感受这是前端开发中必需要了解的一个插件。该插件是：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系统的童靴有帮助！