Vue中路由传参

路由传参并接收参数

注意点：在路由配置文件中，需要给组件定义路由后，才能在浏览器中输入地址访问该页面；若想传参并且获取参数，必须有下面这种路由配置

{
    path:'/组件路由名称/:参数名称'，
    component：组件名
}

组件中给路由传参

ps:传参时是this.$router,接收参数是this.$route`

1.$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
2.$route为当前router跳转对象，里面可以获取name、path、query、params等

传参：

直接在url中输入地址：【/组件路由名称/参数】

在相应的组件中，【$route.params.参数名获】取上面的参数

通过$router来实现传参

 <ul>  
  <li v-for="item in 3" @click="handerItem(item)"\>argu{{item}}</li>  
 </ul>

path来实现

• 方案一：

methods:{  
  handerItem(name) {  
    this.$router.push({  
       path:\`/argu/${name}\`  
  })  
  }  
}

需要对应路由配置如下：

    {  
      path:'/argu/:name',  
      name:'Argu',  
      component:()=>import('@/components/argu')  
    }

很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this.$route.params.id

注意点： 配置文件中参数前不仅要有‘/’还要有‘：’；但是在父组件中则不需要‘：’

• 方案二：

  父组件：使用path来匹配路由，然后通过query来传递参数 ；这种情况下 query传递的参数会显示在url后面?id=？

        父组件中：

         methods:{  
          handerItem(name) {  
            this.$router.push({  
               path:\`/argu\`,  
          query:{  
                 name:name  
              }  
            })  
          }  
        }

配置文件中：

{  
  path:'/argu',  
  name:'Argu',  
  component:()=>import('@/components/argu')  
}

子组件中:

<div>  
 <h2>路由传参</h2>  
 <p>获取到url的</p> {{$route.query.name}}  
</div>

注意点：

• 父组件中在this.$router.push中使用path加query的方法时，配置文件中不能在path后面再加‘/:name’
• 在子组件中需要用$route.query.name来获取参数
• 在url中我们可以获取到‘？name=参数’，等同于GET请求

name来实现

• 方案一：

  *父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数/:name*

  methods:{  
         handerItem(name) {  
           this.$router.push({  
             name:'Argu',  
             params:{  
                   name:name  
                 }  
               })  
             }  
  }

  对应路由配置: 这里可以添加:/name 也可以不添加，添加数据会在url后面显示，不添加数据就不会显示

  不添加:/name的情况：

  {  
     path:'/argu',  
     name:'Argu',  
     component:()=>import('@/components/argu')  
   }

  在页面中：

  

  添加:/name的情况:

通过path来实现参数

    handerItem(name) {  
      this.$router.push({  
        path:`/argu/${name}\`
      })  
    }
   

也可以用下面的其实都是一样的：

handerItem(name) {  
  this.$router.push({  
    path:'/argu',  
  params:{  
      name:name  
    }  
  })  
}

小结

1. query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，
2. params相当于post请求，参数不会再地址栏中显示

补充：

当一个组件中有<router-view></router-view>时，就要考虑，在配置路由时，这个组件下还有子组件

 {  
  path:'/singer',  
  component:()=>import('components/singer/singer'),  
  children:[  
      {  
        path: ':id',  
        component: () => import('components/disc/disc')  
      }  
  ]  
}

跳转组件：
this.$router.push({  
  path:\`/singer/${id}\`,  
})

接受组件：
this.$route.params.id