一 ：路由
路由：vue-router
是Vue的工具庫 vue-router.js
下載：
npm install vue 下載vue
npm install vue-router 下載vue-router

   通過不同的url訪問不同的頁面
   spa(single page application) 單頁面應(yīng)用

例：

<div id='app'>
       <!--//1.-->
       <router-link to='/home'>首頁</router-link>
       <router-link to='/detail'>詳情頁</router-link>
       <!-- 盛放每個頁面對應(yīng)的內(nèi)容-->
       <router-view></router-view>
   </div>
    <script src='js/vue.js'></script>
    <script src='js/vue-router.js'></script>
    <script>
        //2.創(chuàng)建組件
        var Home={
            template:`
                <h1>這是首頁</h1>
            `
        }
        
        var Detail={
             template:`
                <h1>這是詳情頁</h1>
            `
        }
        
        //3.配置路由
        const routes=[
            {path:'/home',component:Home},
            {path:'/detail',component:Detail}
        ]
        
        //4.創(chuàng)建一個路由實例
        const router=new VueRouter({
            routes:routes
        })
        
        //把路由掛在到vue實例上
       new Vue({
           el:'#app',
           router:router
       })
    </script>

二、生命周期

<div id='app'>{{msg}}</div>
   <script src='js/vue.js'></script> 
   <script>
       new Vue({
           el:'#app',
           data:{
               msg:'hello vue'
           },
           beforeCreate:function(){
               alert('beforeCreate')
           },
           created:function(){
               alert('Created')
           },
           beforeMount:function(){
               alert('befroeMounted')
           },
           mounted:function(){
               alert('mounted')
           }
       })
    </script>

三蝙斜、非父子組件之間的通信

例：

 <div id='app'>
       <child></child>
       <son></son>
   </div>
    <script src='js/vue.js'></script>
    <script>
      var bus=new Vue();  
        
      Vue.component('child',{//a
          template:`
             <div>
                <h2>我是child組件</h2>
                <button @click='sendMsg'>發(fā)送數(shù)據(jù)</button>
             </div>
         `,
          data:function(){
              return{
                  msg:'我是child組件中的數(shù)據(jù)缚甩，要傳給son組件'
              }
          },
          methods:{
              sendMsg:function(){//發(fā)送數(shù)據(jù)
                 bus.$emit('send',this.msg)  
              }
          }
      })
      
      Vue.component('son',{//b
          template:`
           <div>
                <h2>我是son組件</h2>
                <a>{{mess}}</a>
           </div>
         `,
          data:function(){
             return{
                 mess:''
             }
          },
          mounted:function(){
            bus.$on('send',msg=>{
                console.log(this);
                this.mess=msg
            })  
              
          }
          
          
      })
        
        
      new Vue({
          el:'#app'
      })
    </script>