Как маршрутизатор Vue получает текущий маршрут маршрута для ленивых модулей при загрузке страницы?

У меня есть vue-приложение с маршрутизатором, настроенным как:

import index from './components/index.vue';
import http404 from './components/http404.vue';

// module lazy-loading
const panda= () => import(/* webpackChunkName: "group-panda" */ "./components/panda/panda.vue");
// ...

export const appRoute = [
  {
    path: "",
    name: "root",
    redirect: '/index'
  },
  {
    path: "/index",
    name: "index",
    component: index
  },
  {
    path: "/panda",
    name: "panda",
    component: panda
  },
  //...
  {
    path: "**",
    name: "http404",
    component: http404
  }
];

Таким образом, модуль panda ленивый. Тем не менее, когда я перехожу к странице panda, console.log() this.$route.path в App.vue this.$route.path App.vue mounted()

"/"

вместо

"/панда"

Но индексная страница работает хорошо, она точно показывает

"/индекс"

как и ожидалось.

Итак, как маршрутизатор Vue может получить текущий путь корректно на странице с ленивым загрузчиком, когда страница загружена? Я что-то пропустил?

Редактировать:

Он может, однако, поймать правильный путь после горячей перезагрузки Webpack. Он ловит "/" при первом посещении panda, но после того, как я что-то меняю в исходном коде, hotp reloads webpack-dev-server, тогда он получает "/panda".

Поэтому я предполагаю, что это имеет какое-то отношение к жизненному циклу Vue.

Ответы

Ответ 1

Может быть, вам нужно использовать $route not $router

здесь: https://jsfiddle.net/nikleshraut/chyLjpv0/19/

Вы также можете сделать это с помощью $router таким образом

https://jsfiddle.net/nikleshraut/chyLjpv0/20/

Ответ 2

Существует свойство currentRoute которое сработало для меня: this.$router.currentRoute