vue路由中query参数的一点应用

首先我们得在router文件中

import PreciousDetail from "../components/gameList/PreciousDetail.vue"

export default new Router({
  routes: [
    {
      path: "/preciousDetail/:game_phase?:share_id",//这里是我们定义的路由参数
      component: PreciousDetail,
      meta: {title: "language.precious_detail"}
    }

通过vue中的路由问号传参,设定我们需要的路由参数。

在组件的方法中写一个跳转路由的方法,目的是将路由参数传递过去。

shareGame(game){
  this.$router.push(`/preciousDetail/${game.game_phase}?share_id=001`);
}

在页面跳转过来之后显示的URL是
http://localhost:8080/#/preciousDetail/241?share_id=001

根据跳转页面之后我们要从地址栏中拿到我们想要的参数
包括params值和query值,当然我们要拿到相应的值,需要通过

this.$route.params.game_phase
this.$route.query.share_id

分别拿到。
然后在相应的跳转后的页面中根据拿到的值,进行我们相应的处理。

handleShareFn(){
  if(this.$route.query.share_id == '001'){
    console.log(1);
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值