Реактивный объект Vue Router, заключенный в ref (), не работает

У меня есть приложение, в котором я хотел бы распечатать местоположение пользователя, похожее на хлебную крошку. У меня есть компонент, который я добавляю на уровне приложения и ожидаю, что он обновится с текущим значением или объектом router.currentRoute. Однако, похоже, он не обновляется, как ожидалось.

Я использую плагин Vue2 Composition api и изо всех сил стараюсь поддерживать его в приличном состоянии, которое значительно упростит переход на Vue3, когда я смогу. Это означает, что я бы не хотел использовать доступный объект context.$route. Моя попытка в настоящее время импортирует маршрутизатор напрямую и обертывает объект currentRoute в ref(), но это, похоже, не работает.

Вот CodeSandbox с приложением. это показывает проблему. У меня есть домашняя страница и две дополнительные страницы. Текст, который гласит «Ваше текущее местоположение: Дом», должен измениться на имя других страниц при перемещении туда, но не изменится вообще.

<template>
  <div>
    <p>Your current location is: {{ location.name }}</p>
  </div>
</template>

<script>
import { defineComponent, ref } from "@vue/composition-api";
import router from "@/router";

export default defineComponent({
  name: "Page1",
  setup() {
    const location = ref(router.currentRoute);

    return { location };
  },
});
</script>

Пожалуйста, дайте мне знать, есть ли способ сделать это так, как я хотел бы. Если это невозможно, я просто перекусываю и использую context.$route и займусь большим рефакторингом при переходе на Vue3.


javascript vue.js vuejs2 vue-composition-api vue-reactivity
person Jmh2013    schedule 09.12.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать reactive() в экземпляре router, а затем _ 3_, чтобы получить currentRoute:

import { defineComponent, reactive, toRef } from '@vue/composition-api'
import router from '@/router'

export default defineComponent({
  setup() {
    const location = toRef(reactive(router), 'currentRoute')
    return { location }
  }
})

Демонстрация Vue 2

Вы, вероятно, все равно перенесете это в Vue 3, потому что следующая версия Vue Router уже имеет другую семантику для Composition API. Вы можете просто использовать useRoute() из Vue Router 4 в Vue 3:

import { defineComponent } from 'vue'
import { useRoute } from 'vue-router'

export default defineComponent({
  setup() {
    const location = useRoute()
    return { location }
  }
})

Демонстрация Vue 3

person tony19    schedule 13.12.2020