vue中router傳遞與接收參數的簡單梳理

方法一:

直接在對應路由中配置參數，

{
      path: '/canshu/:id',
      name: 'canshu',
      props: true,  //props設置為true，在組件中也通過props接收后，可直接將route.params設置為組件中的屬性
      component: resolve=>require(['./components/canshu.vue'],resolve)
    },

　　　　參數直接拼接在path后面　　　

this.$router.push({
                  path:'canshu/2',           
              })

　　　　組件中通過props接收后可直接使用，如果不通過props接收，可在$route.params.id中取出

props:['id'],
        mounted(){
            console.log(this.$route,this.id,"id參數")
        }
    }

參數會顯示在url上刷新不丟失

方法二：

通過params傳參

　　　　組件中　　　

 this.$router.push({
                  name:'canshu',
                  params:{
                      id:3
                  }
              })

             此時路由配置有2種情況

             1.path中仍然配置餐數，結果與方法一相同　

{
      path: '/canshu/:id',
      name: 'canshu',
      props: true,
      component: resolve=>require(['./components/canshu.vue'],resolve)
    },

　　　　2.path中不配置參數，url后不會拼接參數，刷新會消失

{
      path: '/canshu',
      name: 'canshu',
      props: true,
      component: resolve=>require(['./components/canshu.vue'],resolve)
    },

 

　　　　組件中接收方式相同　　　

props:['id'],
        mounted(){
            console.log(this.$route,this.id,"id參數")
        }

刷新后

方法三

通過query傳參

this.$router.push({    

 　　　　　　　　　　　path:'/canshu',

                  query:{
                      id:5
                  }
              })

一般路由中就不在配置參數了

 {
      path: '/canshu',
      name: 'canshu',
      props: true,
      component: resolve=>require(['./components/canshu.vue'],resolve)
    },

組件中用$route.query調用參數

mounted(){
            console.log(this.$route,this.id,"id參數")
        }

參數會在url后用?拼接

如果路由中也配置了參數，仍要用query傳參，則必須params和query同時傳參，否則無法進入到組件中，或者不用path指向組件，直接使用name

{
      path: '/canshu/:id',
      name: 'canshu',
      props: true,
      component: resolve=>require(['./components/canshu.vue'],resolve)
    },

可以通過path拼接，也可以用params進行傳參

 this.$router.push({//path拼接
                  path:'/canshu/3',
                  query:{
                      id:5
                  }
              })

 this.$router.push({//params傳參               
                    name:'canshu',
                    params:{
                        id:3
                    },
                    query:{
                        id:5
                    }
              })

如果拼接了path同時也用了parama則params會覆蓋掉path的參數

this.$router.push({
                 
                    name:'canshu',
                    params:{
                        id:6
                    },
                    path:'/canshu/3',

                    query:{
                        id:5
                    }
              })

最后總結一下

 {
      path: '/canshu',
      name: 'canshu',
      props: true,
      component: resolve=>require(['./components/canshu.vue'],resolve)
    }, 

在路由中某個路徑的props如果設置為true,則可以在對應組件中通過props解耦params中的參數，直接在組件中通過this調用參數。但是只能接受params中的參數，query的不可以

通過params傳參實際上有兩種方式,

①直接通過params

 this.$router.push({                 
                    name:'canshu',
                    params:{
                        id:6
                    },                
              })

直接通過params傳參時必須配合 name，而不能用path。

②通過path拼接參數，但必須在路由中同時配合才行

 this.$router.push({
                    path:'/canshu/3',
              })

{
      path: '/canshu/:id',
      name: 'canshu',
      props: true,
      component: resolve=>require(['./components/canshu.vue'],resolve)
    },

用params傳參時如果在路由中沒有通過path配置則不會出現在url中刷新會丟失數據；相反配置后，參數會出現在url刷新不會丟失。

 

用query傳參，會在url后用？拼接參數，並且刷新不會丟失，

用query傳參時一般配合path使用

this.$router.push({
                    path:'/canshu',
                    query:{
                        id:5
                    }
              })

但實際用name配合也可以

this.$router.push({
　　　　　　　　　　　　 name:'canshu',
                    query:{
                        id:5
                    }
              })

 

如果路由中配置了參數，當只通過path進入指定路徑是必須在path后拼接參數

  {
      path: '/canshu/:id',
      name: 'canshu',
      props: true,
      component: resolve=>require(['./components/canshu.vue'],resolve)
    },

 

this.$router.push({
                    path:'/canshu/6',                
                
              })

 

如果同時用name和path，path會被重寫

this.$router.push({
                    path:'/canshu/6',
                    name:'canshu',

              })