路由之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系统的童靴有帮助！