路由传值

注意
1.父组件push使用this.$router.push
2.在子组件中获取参数的时候是this.$route.params

1 、动态路由传值

   1.1 配置动态路由
      routes:[
         //动态路由参数  以冒号开头
         {path:'/user/:id',conponent:User}
       ]

   1.2 传值
     第一种写法 :  <router-link :to="'/user/'+item.id">传值</router-link>
     第二种写法 : goToUser(id) {
                    this.$router.push( {path:'/user/'+id});
                  }
   1.3 在对应页面取值
       this.$route.params;  //结果:{id:123}

2、 Get传值(类似HTMLGet传值）

 2.1 配置路由
     const routes = [{path:'/user',component:User},]
 2.2 传值  
     第一种写法 : <router-link :to="'/user/?id='+item.id">传值</router-link>
     第二种写法 : goToUser(id) {
                        //'user' 是路径名称
                      this.$router.push({path:'user',query:{ID:id}});
                  }
 2.3 在对应页面取值
     this.$route.query;  //结果 {id:123}

Tips：路径传递参数会拼接在URL路径后

3 、命名路由push传值

3.1 配置路由
   const routes = [{path:'/user',name: 'User',component:User},]
3.2 传值  
        goToUser(id) {
                //'User' 是路径重命名
              this.$router.push({name:'User',params:{ID:id}});
           }
3.3 在对应页面取值
       this.$route.params;  //结果:{id:123}

Tips：命名路由传递参数不在URL路径拼接显示