javascript - 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
  }
];

因此， Pandas 模块是延迟加载的。但是，当我导航到panda页面时，this.$route.path的App.vue生命周期中mounted()的console.log()仅输出



代替



但是索引页运行良好，可以准确显示



如预期的那样。

那么，Vue路由器在初始加载页面时如何正确获取延迟加载页面的当前路径？我错过了什么？

编辑:

但是，在Webpack热重新加载后，它可以捕获正确的路径。第一次访问panda时，它捕获到“/”，但是在我更改了源代码中的某些内容之后，webpack-dev-server hot-reloads，然后得到“/panda”。

因此，我认为这与Vue生命周期有关。

最佳答案

有一个currentRoute属性对我有用:this.$router.currentRoute