Запрос маршрута не определен при использовании useRoute () в setup () для Vue3 и vue-router4 (далее)

Question

Я использую Vue3 с vue-router 4.0.5, и у меня возникла проблема, когда кажется, что useRoute () правильно перенаправляет маршрут, но запрос маршрута не определен, хотя запрос существует.

Для пути /search?q=vue ожидается, что это равно vue но он возвращает undefined.

В шаблоне {{ $route.query.q }} правильно возвращает значение запроса.

При входе в консоль route объект зарегистрирован правильно и содержит объект запроса маршрута, но не определен.

Мне интересно, почему searchQuery в этом примере возвращается как неопределенное.

Answer 1

Обновляется асинхронно, и вы регистрируете его до того, как обновление действительно произойдет.

Когда ты console.logобъект, браузер автоматически обновляет зарегистрированное значение, чтобы показать самое последнее. Однако это неверно для строк, поэтому searchQuery строка undefined в журнале, а route объект обновлен.

В этом случае вы должны использовать <tcode id="17957017"></tcode>prop, чтобы получить запрос. А если вы хотите наблюдать за изменениями в запросе, используйте часы :

      import { computed, watch } from 'vue'

export default {
  setup() {
    const route = useRoute()
    const searchQuery = computed(() => route.query.q)

    watch(searchQuery, newSearchQuery => console.log(newSearchQuery))

    return {
      searchQuery
    }
  }
}