Vue-Router 源码分析(七) VueRouter.push()的详解

<div id="app">
    <button @click="test">测试</button>   
    <hr/>
    <router-view></router-view>
</div>
<script>                   
    const info   = { template:‘<div>Page info</div>‘}             //登陆页
    const home   = { template:‘<div>Page home:{{this.$route.params.uid}}</div>‘}            //主页
    const detail = { template:‘<div>Page detail:{{this.$route.params.id}}</div>‘}         //详情页
    
    const router = new VueRouter({
        routes:[                                   
            {path:‘/info‘,component:info},
            {path:‘/home/:uid‘,component:home,name:‘home‘},
            {path:‘/detail/:id‘,component:detail,}
        ]
    })
    const app = new Vue({                                                     
        el:‘#app‘,
        data:{no:0},
        router:router,
        methods:{
            test(){
                this.no = this.no%3+1;
                switch(this.no){                         //点击测试按钮将依次跳转到三个不同的组件，跳转时使用的push参数也不同
                    case 1:
                        this.$router.push(‘/info‘)
                        break;
                    case 2:
                        this.$router.push({name:‘home‘,params:{uid:10}})
                        break;
                    case 3:
                        this.$router.push({path:‘/detail/15‘})
                        break;
                }
            }
        }
    })
</script>