vue-router 路由传值

1. 路由跳转
    <router-linkto="/foo">Go to Foo</router-link>
2.路由传值方式
  方式1：params传值
               跳转页面：this.$router.push({name: 'first',params:{id:'123'}})
               路由：{
                           path: '/first:id',
                           name: 'first',
                           component: () => import('./views/routerDemo/first.vue')
                           }
                 接收页面：this.$route.params.id
       
               路由状态：http://localhost:8080/first123

方式2：query传值
             跳转页面：this.$router.push({path: 'second',query:{id:'456'}})
             路由：{
                         path: '/second',
                         name: 'second',
                         component: () => import('./views/routerDemo/second.vue')
                         }
            接收页面：this.$route.query.id

           路由状态：http://localhost:8080/second?id=456

方式3：参数传值
            跳转页面：var foo = 'aaa'   this.$router.push(`/params/${foo}`)
            路由：{ path: '/params/:id',
                        component: () => import('./views/routerDemo/second.vue')
                       }
            接收页面：this.$route.params.id

            路由状态：http://localhost:8080/params/123

PS:  推荐使用方式2，因为方式1会改变path路径，影响$router.path的判断
        使用方式1传值 console.log(this.$route.path) 的结果是 “/first123”
        使用方式2传值 console.log(this.$route.path) 的结果是 “/second”
        使用方式3传值 console.log(this.$route.path) 的结果是 “/params/123”