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