Vue中路由传参

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

路由传参并接收参数

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

{
    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

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

        父组件中:

         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>

image.png

注意点:

name来实现

通过path来实现参数

image.png

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

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

handerItem(name) {  
  this.$router.push({  
    path:'/argu',  
  params:{  
      name:name  
    }  
  })  
}
小结
  1. query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,
  2. params相当于post请求,参数不会再地址栏中显示
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看