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);
  }
}

你可能感兴趣的:(vue)