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”

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容