У меня есть 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.