vue.js（20）--vue路由

後端路由

對於普通的網站，全部的超連接都是url地址，全部的url地址都對應着服務器上的資源

前端路由

對於單頁面應用程序來講，主要經過單頁面中的hash（#）來進行頁面的切換。hash的特色是http的請求中不會包含hash中的相關內容，因此單頁面中的hash跳轉主要用hash實現。經過hash來切換頁面叫作前端路由。

基本路由結構

1.導入vue-router.js,注意前後順序

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

2.建立一個控制區域與vm實例

<div class="app">


</div>
<script>
        var vm = new Vue({
        el:'.app'
    }) 
</script>

3.建立組件，並定義組件量

<template id="login">
        <div><h1>登陸組件</h1></div>
    </template>
    <template id="register">
        <div><h1>註冊組件</h1></div>
    </template>


<script>
var login ={
            template:'#login'
        }
        var register={
            template:'#register'
        }
</script>

4.建立一個router實例，設定路由地址與組件

        var router= new VueRouter({
            routes:[//注意此處的routes
                {path:'/login',component:login},
                {path:'/register',component:register}
            ]
        })

5.在vm實例中關聯router實例

        var vm = new Vue({
        el:'.app',
        router:router//可簡寫爲router
    }) 

6.頁面經過router-view建立組件顯示區域，經過router-link綁定路由地址，實現組件切換。

    <div class="app">
        <router-link to="/login?id=20">登陸</router-link>
        <!-- 注意router-link的使用，地址中能夠傳參 -->
        <router-link to="/register">註冊</router-link>
        <router-view></router-view>
    </div>