vue2.0入门及实战开发(七)

编程导航

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标识上