vue第六天

vue 路由

路由通俗解釋：根據不一樣url地址，出現不一樣效果，通常是用來寫SPA應用，單頁面應用

這裏用的是vue-router 0.7.13版本
一個路由的基本結構跟用法：
引入路由js文件：

<script src="js/vue.js"></script>

<script src="js/vue-router.js"></script>

html:

<a v-link="{path:'/home'}">主頁</a>    //跳轉連接,v-link裏面也是寫json 
    <a v-link="{path:'/news'}">新聞</a>           
    
    <router-view></router-view>           //展現內容

js:

//1. 準備一個根組件
    var App=Vue.extend();

//2. Home News組件都準備
    var Home=Vue.extend({
        template:'<h3>我是主頁</h3>'
    });

    var News=Vue.extend({
        template:'<h3>我是新聞</h3>'
    });

//3. 準備路由
    var router=new VueRouter();

//4. 關聯
    router.map({
        'home':{
            component:Home
        },
        'news':{
            component:News
        }
    });

//5. 啓動路由:#box是做用範圍
    router.start(App,'#box');

//6.跳轉
    router.redirect({
        '/':'/home'
    });

---

對於多層路由以下：
html：

<div id="box">
        <ul>
            <li>
                <a v-link="{path:'/home'}">主頁</a>
            </li>
            <li>
                <a v-link="{path:'/news'}">新聞</a>
            </li>
        </ul>
        <div>
            <router-view></router-view>
        </div>    
    </div>     
    <template id="home">
        <h3>我是主頁</h3>
        <div>
            <a v-link="{path:'/home/login/zns'}">登陸</a>
            <a v-link="{path:'/home/reg/strive'}">註冊</a>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </template>
    <template id="news">
        <h3>我是新聞</h3>
        <div>
            <a v-link="{path:'/news/detail/001'}">新聞001</a>
            <a v-link="{path:'/news/detail/002'}">新聞002</a>
        </div>
        <router-view></router-view>
    </template>
    <template id="detail">
        {{$route.params | json}}//當前參數
        <br>
        {{$route.path}}//當前路徑
        <br>
        {{$route.query | json}}//數據
    </template>

js：

//1. 準備一個根組件
var App=Vue.extend();

//2. Home News組件都準備
var Home=Vue.extend({
    template:'#home'
}); 
var News=Vue.extend({
    template:'#news'
}); 
var Detail=Vue.extend({
    template:'#detail'
});

//3. 準備路由
var router=new VueRouter();

//4. 關聯
router.map({
    'home':{
        component:Home,
        subRoutes:{
            '/login/:name':{
                component:{
                    template:'<strong>我是登陸信息 {{$route.params | json}}</strong>'
                }
            },
            'reg':{
                component:{
                    template:'<strong>我是註冊信息</strong>'
                }
            }
        }
    },
    'news':{
        component:News,
        subRoutes:{
            '/detail/:id':{
                component:Detail
            }
        }
    }
});

//5. 啓動路由
router.start(App,'#box');

//6. 跳轉
router.redirect({
    '/':'home'
});