程式設計導航

this.$router.go(-1) 根據瀏覽器記錄來前進和後退
前進 1 後退 -1

this.$router.push(直接跳轉到某個頁面顯示)
   引數：字串/xxx
   物件: {name: 'xxx',query:{id:1},params: {}}

<button @click="goMusic">跳轉到音樂</button>
<button @click="goBack">向上一頁</button>

export default{
    data(){
        return{

        }
    },methods
 
:{
         goMusic(){
             this.$router.push('/music');
        }
         getMovie(){
             this.$router.push({
                name:'movie' 
             })
         }，
         goBack(){
             this.$router.go(-1);
         }
    }
}
注意：這裡對應著main.js中的routes路由規則
let router=new
 
 VueRouter({
    routes:[
      {name : 'music',path:'/music',component:Music},
      {name : 'movie',path:'/movie',component:Movie}
    ]
})

程式設計式導航也可以傳遞引數的
testParams(){
    查詢字串的方式  /music?id=1&name=2     重點
    this.$router.push({
        name: 'music',query:{id:1,name:2} 
    })
}


注意：
<div id="content"
 
></div>

監視錨點值的改變
window.addEventListeer('hashchange',function(){
    switch(location.hash){
        case '#/music':
           text='各種音樂的資料';
           break;
        case '#/movie':
           text='各種電影的資料'；
           break;
    }
    document.getElementById('content').innerHTML=text;
})


總結：
路由
window.addEventListener('hashchange',fn);
根據你放<router-view></router-view>作為一個DOM上的標識  
作用就類似於<div id="xxx"></div>

最終當錨點值改變觸發hashchange的回撥函式，我們將制定的模組資料插入到DOM標識上