路由：vue-router

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

（2）：可以根据不同的url访问不同的页面

（3）：可以创建单面应用

回顾小知识

const:声明常量，const定义的变量不可以修改，而且必须初始化

var: 在es5中声明变量,变量可以修改，如果不初始化会输出undefined，不会报错

let: 在es6中声明变量 ，块级作用域，函数内部使用let定以后，对函数外部无影响

指令补充

 <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>

    <!--盛放链接的内容-->
    <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'
    });
/*-第五步 路由实例转载到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>

    <!--盛放链接的内容-->
    <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'
    });
    /*-第五步 路由实例转载到vue实例上----*/
    new Vue({
        el:'#app',
        router:m
    })
</script>