Vue(十)---路由

　　Vue.js 路由容許咱們經過不一樣的 URL 訪問不一樣的內容。經過 Vue.js 能夠實現多視圖的單頁Web應用（single page web application，SPA）。

須要引入vue-router.js

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
    <div class="menu">
        <!--
            router-link 至關於就是超鏈
            to 至關於就是 href
        -->
        <router-link to="/user">用戶管理</router-link>
        <router-link to="/product">產品管理</router-link>
        <router-link to="/order">訂單管理</router-link>
    </div>
     
    <div class="workingRoom">
        <!--
            點擊上面的/user,那麼/user 對應的內容就會顯示在router-view 這裏
         -->
         <router-view></router-view>   
    </div>
 
</div>
<script>
    /*
    * 申明三個模板( html 片斷 )
    */
    var user = { template: '<p>用戶管理頁面的內容</p>' };
    var second = { template: '<p>產品管理頁面的內容</p>' };
    var order = { template: '<p>訂單管理頁面的內容</p>' };
    /*
    * 定義路由
    */
    var routes = [
        { path: '/', redirect: '/user'}, // 這個表示會默認渲染 /user，沒有這個就是空白
        { path: '/user', component: user },
        { path: '/product', component: second },
        { path: '/order', component: order }
    ];
    /*
    * 建立VueRouter實例
    */
    var router = new VueRouter({
        routes:routes
    });
    /*
    * 給vue對象綁定路由
    */
    new Vue({
        el:"#app",
        router
    })
 
</script>