vue js может ли маршрут с запросом перейти к компоненту?

Question

Я хочу знать, возможно ли отправить URL с запросом на страницу компонента?

Например, это URL /physicians/?apptId=123&npi=123456789, и я хочу, чтобы он перешел в BookAnAppointment.vue. Я знаю, что это работает, если у меня определен маршрут, подобный этому /physicians/:npi?apptId=123, но это не то, что я хочу.

На странице PhysicianLanding, если я нажму кнопку «Книга», она добавит параметры в URL, но я не могу понять, как отправить ее в компонент BookAnAppointment.

маршрутизатор / 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 / компоненты / 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>

SRC / компоненты / BookAnAppointment.vue

<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>

Answer 1

Если вы действительно хотите использовать тот же URL-адрес, но с разницей только в параметрах запроса , есть решение, основанное на маршрутах и ​​их порядке - добавьте тот же маршрут, но с другим именем и крюком для перенаправления, если запрос существует, и по желанию вы можете динамически устанавливать реквизиты для BookAnAppointment компонент:

    // 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>