路由：vue-router

(1):路由是vue的核心插件

（2）：可以根據(jù)不同的url訪問不同的頁面

（3）：可以創(chuàng)建單面應用

回顧小知識

const:聲明常量，const定義的變量不可以修改，而且必須初始化

var: 在es5中聲明變量,變量可以修改，如果不初始化會輸出undefined，不會報錯

let: 在es6中聲明變量 ，塊級作用域，函數(shù)內(nèi)部使用let定以后，對函數(shù)外部無影響

指令補充

 <style>
    [v-cloak]{
         display:none;
    }

    </style>
<div id="app">
    <p v-cloak>{{msg}}</p>
    <input type="text" v-model="msg">
    <h1 v-html>{{msg}}</h1>
    <h2 v-text>{{msg}}</h2>
    <h4 href="" v-pre>{{msg}}</h4>
    <h3 v-once>{{msg}}</h3>
</div>
<script src="dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'hello vue'
        },
        beforeMount:function(){
            alert('beforeMount')
        }
    })
</script>

一個路由的基本應用：
<style>
    .active{
        color:red;
    }
</style>
<div id="app">
    <!--這是第一步-->
    <router-link to="/home">首頁</router-link>
    <router-link to="/user">用戶也</router-link>

    <!--盛放鏈接的內(nèi)容-->
    <router-view></router-view>
</div>
<script src="dist/vue.js"></script>
<script src="dist/vue-router.js"></script>
<script>
    /*--這是第二步--*/
    var Home={
        template:`
        <h1>我是首頁</h1>
        `
    };
    var User={
        template:`
        <h1>我是用戶也</h1>
        `
    };
/*--第三步配置路由---*/
    const r=[
        {path:'/',component:Home},
        {path:'/home',component:Home},
        {path:'/user',component:User}
    ];
/*--第四部步建路由實例--------*/
    const m=new VueRouter({
        routes:r,
        linkActiveClass:'active'
    });
/*-第五步 路由實例轉(zhuǎn)載到vue實例上----*/
    new Vue({
        el:'#app',
        router:m
    })
</script>

路由的嵌套

<style>
        .active{
            color:red;
        }
    </style>
<div id="app">
    <!--這是第一步-->
    <router-link to="/home">首頁</router-link>
    <router-link to="/user">用戶也</router-link>

    <!--盛放鏈接的內(nèi)容-->
    <router-view></router-view>
</div>
<script src="dist/vue.js"></script>
<script src="dist/vue-router.js"></script>
<script>
    /*--這是第二步--*/
    var Home={
        template:`
        <h1>我是首頁</h1>
        `
    };
    var User={
        template:`
        <div>
            <h1>我是用戶也</h1>
            <ul>
              <li>
                <router-link to="/user/zhu">注冊</router-link>
              </li>
              <li>
                <router-link to="/user/deng">登錄</router-link>
              </li>
            </ul>
            <router-view></router-view>
        </div>
        `
    };
    var Ho1={
        template:`
        <h1>我是注冊頁面</h1>
        `
    };
    var Us1={
        template:`
        <h1>我是登錄頁面</h1>
        `
    };
    /*--第三步配置路由---*/
    const r=[
        {path:'/',component:Home},
        {path:'/home',component:Home},
        {
            path:'/user',
            component:User,
            children:[
                {path:'zhu',component:Ho1},
                {path:'deng',component:Us1}
            ]
        }
    ];
    /*--第四部步建路由實例--------*/
    const m=new VueRouter({
        routes:r,
        linkActiveClass:'active'
    });
    /*-第五步 路由實例轉(zhuǎn)載到vue實例上----*/
    new Vue({
        el:'#app',
        router:m
    })
</script>