react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

时间:2022-12-02 18:05:44

完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html

8、vue怎么通过路由传参?

  a、通配符传参数

react router @4 和 vue路由 详解(六)vue怎么通过路由传参?
//在定义路由的时候

{
path: '/describe/:id',
name: 'Describe',
component: Describe
} //在使用的时候 this.$router.push({
path: `/describe/${id}`,
}) //接收页面获取值 this.$route.params.id
react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

  b、params传参,跳转的时候不会显示在url上

react router @4 和 vue路由 详解(六)vue怎么通过路由传参?
//在定义路由的时候

{
path: '/describe',
name: 'Describe',
component: Describe
} //在使用的时候 this.$router.push({
name: 'Describe',
params: {
id: id
}
}) //接收页面获取值 this.$route.params.id
react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

  c、query传参,传餐的时候在url显示? key=value & key=value

react router @4 和 vue路由 详解(六)vue怎么通过路由传参?
//在定义路由的时候

   {
path: '/describe',
name: 'Describe',
component: Describe
} //在使用的时候 this.$router.push({
path: '/describe',
query: {
id: id
}
}) //接收页面获取值
this.$route.query.id
react router @4 和 vue路由 详解(六)vue怎么通过路由传参?