Javascript vue js是否可以将带有查询的路由转到组件？

我想知道是否可以将带有查询的URL发送到组件页面

例如，这是URL

/medicages/？apptId=123&npi=123456789

，我希望它转到bookanpointment.vue。我知道如果我有一个这样定义的路径，它是有效的，但这不是我想要的

在Physician登录页上，如果我单击“Book”按钮，它将向URL添加参数，但我不知道如何将其发送到BookaPoint组件

路由器/index.js

import Vue from 'vue'
import Router from 'vue-router'
import PhysicianLanding from '@/components/PhysicianLanding'
import PhysicianProfile from '@/components/PhysicianProfile'
import BookAnAppointment from '@/components/BookAnAppointment'

Vue.use(Router)

export default new Router({
  routes: [
    { 
      path: '/physicians',
      component: PhysicianLanding
    },
    { 
      path: '/physicians/profile/:url',
      component: PhysicianProfile
    },
    { 
      path: '/physicians/:npi',
      component: BookAnAppointment,
      props: true
    }
  ]
})

src/components/PhysicianLanding.vue

<template>
  <div class="container">
    <h1>{{ msg }}</h1>
    <!-- I know this works -->
    <button type="button" @click="$router.push({ path: '/physicians/' + physicianNpi, query: { appt_id: apptId }})">Book an Appointment</button>
    <!-- I want this one to work -->
    <button type="button" @click="$router.push({ path: '/physicians/', query: { appt_id: apptId, npi: physicianNpi }})">Book</button>
  </div>
</template>

<script>
  export default {
    name: 'PhysicianLanding',
    data () {
      return {
        msg: 'Welcome to the physicians landing page',
        apptId: '05291988',
        physicianNpi: '1346264132'
      }
    }
  }
</script>

<template>
  <div class="container">
    <h1>Book an Appointment</h1>
    <p>This is where you will book an appointment</p>

    <h2>Query Params</h2>
    <p>appt_id is {{ $route.query.appt_id }}</p>

    <button type="button" @click="$router.push({ path: '/physicians' })">Go back</button>
  </div>
</template>

<script>
  export default {
    name: 'BookAnAppointment',
    props: ['npi'],
    created () {
      console.log('npi is ' + this.$route.params.npi)
      console.log('appt_id is ' + this.$route.query.appt_id)
    },
    data () {
      return {}
    }
  }
</script>

{{msg}}
预约
书
导出默认值{
名称：'PhysicianLanding'，
数据（）{
返回{
msg:'欢迎来到医师登录页'，
附录：“05291988”，
医生NPI:'1346264132'
}
}
}

src/components/bookanpoint.vue

<template>
  <div class="container">
    <h1>{{ msg }}</h1>
    <!-- I know this works -->
    <button type="button" @click="$router.push({ path: '/physicians/' + physicianNpi, query: { appt_id: apptId }})">Book an Appointment</button>
    <!-- I want this one to work -->
    <button type="button" @click="$router.push({ path: '/physicians/', query: { appt_id: apptId, npi: physicianNpi }})">Book</button>
  </div>
</template>

<script>
  export default {
    name: 'PhysicianLanding',
    data () {
      return {
        msg: 'Welcome to the physicians landing page',
        apptId: '05291988',
        physicianNpi: '1346264132'
      }
    }
  }
</script>

<template>
  <div class="container">
    <h1>Book an Appointment</h1>
    <p>This is where you will book an appointment</p>

    <h2>Query Params</h2>
    <p>appt_id is {{ $route.query.appt_id }}</p>

    <button type="button" @click="$router.push({ path: '/physicians' })">Go back</button>
  </div>
</template>

<script>
  export default {
    name: 'BookAnAppointment',
    props: ['npi'],
    created () {
      console.log('npi is ' + this.$route.params.npi)
      console.log('appt_id is ' + this.$route.query.appt_id)
    },
    data () {
      return {}
    }
  }
</script>

预约
这是你要预约的地方

查询参数
appt_id为{{$route.query.appt_id}

回去
导出默认值{
名称：“BookAnapointment”，
道具：['npi']，
创建（）{
console.log（'npi is'+this.$route.params.npi）
log（'appt\u id为'+this.$route.query.appt\u id）
},
数据（）{
返回{}
}
}

如果您真的想使用相同的url，但在查询参数上有所不同有一种基于路由及其顺序的解决方案-添加相同的路由，但名称不同，如果存在查询，则可以使用钩子重定向，并且作为可选选项，您可以为BookAnapoint组件动态设置道具：

    // router
    { 
       path: '/physicians',
       component: PhysicianLanding,
       beforeEnter(to, from, next) {
          if (to.query && to.query.npi) {
              // redirect to route below
              next({ name: 'some route name', query: to.query })
          } else 
              next()
       }
    },
    { 
       path: '/physicians',
       component: BookAnAppointment,
       name: 'some route name',
       // add props
       props: (route) => ({ appt_id: route.query.appt_id, npi: route.query.npi })
    }
    // ... other routes

所以，当您在代码中使用路由器重定向按钮上的用户时，您可以直接使用路由“某些路由名称”：

<button type="button" @click="$router.push({ name: 'some route name', query: { appt_id: apptId, npi: physicianNpi }})">Book</button>

书

或者，如果您使用基于url的重定向，它将由第一个路由的钩子处理：

<button type="button" @click="$router.push({ path: '/physicians/', query: { appt_id: apptId, npi: physicianNpi }})">Book</button>

书

我也在尝试这个解决方案，我似乎在这一行中遇到了一个编译器错误

props:（route）=>{appt_id:route.query.appt_id，npi:route.query.npi}

它似乎需要一个；在

appt\u id之后：route.query.appt\u id

而不是comma@mcallaro是的，对不起，现在已修复。