VueRouter / Firebase: URL-адрес, введенный в браузере, отображает динамический c маршрут только при двойном вводе - PullRequest
Новая
       98

VueRouter / Firebase: URL-адрес, введенный в браузере, отображает динамический c маршрут только при двойном вводе

0 голосов
/ 21 июня 2020

Я пытаюсь заставить vue -router перенаправить на динамический c URL-адрес, созданный из идентификатора документа Firebase, при доступе к URL-адресу root, например: 

const routes = [
  {
    path: "/",
    beforeEnter: async () => {
      let acuerdos = await db.collection("acuerdos").orderBy("fecha", "desc").get()
      let ultimoAcuerdo = acuerdos.docs[0].id
      router.push({ path: `/acuerdos/${ultimoAcuerdo}`})
    }
  }

По большей части это работает нормально. Единственная проблема заключается в том, что когда выполняется перенаправление (например, на /acuerdos/18-06-2020) и отображается представление, если я хочу ввести другой URL (например, на /acuerdos/11-06-2020), он ничего не делает; но тогда он будет работать нормально, если я снова нажму Enter на том же URL.

Для записи, у меня была аналогичная проблема при переходе с одного маршрута c на другой даже изнутри app <router-link>, и я решил его, используя <router-view :key="$route.fullPath"/>. Так что, возможно, ответом будет использование аналогичной key опоры для маршрута, но я не знаю, как это сделать из файла index.js маршрутизатора.

Спасибо за любые указатели!

1 Ответ

1 голос
/ 21 июня 2020

Надеюсь, что маршрут определен в конфигурации маршрутизатора; Я воспроизвел что-то похожее вcodeandbox, и я могу заставить его работать.

Единственная разница в том, что я использовал метод next вместо router.push в гвардии beforeEnter, поскольку я не был уверен откуда вы получаете объект маршрутизатора. 

beforeEnter(to, from, next) {
  next({ path: "/acuerdos/01-01-2001" });
}

Вы можете попробовать его здесь,

Изменить Vue Пример маршрутизации

В качестве примечания, я предпочитаю маршрутизацию с именованными маршрутами, так как это кажется более чистым и более надежным, на мой личный взгляд, 

next({
  name: 'Acuerdos',
  params: {
    date: ultimoAcuerdo
  }
})

Таким образом, даже если путь маршрута изменится , ваш код не сломается.

...