Vue路由器如何在页面加载时获取延迟加载模块的当前路由路径？

Question

我有一个带有路由器设置的 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 模块是延迟加载的。 However, when I navigate to panda page, a console.log() of this.$route.path in App.vue ’s mounted() lifecycle only输出

“/”

代替

“/熊猫”

但是索引页面效果很好，它显示准确

“/指数”

正如预期的那样。

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

编辑：

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

所以我想这与 Vue 生命周期有关。

原文由 Valorad 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有一个 currentRoute 属性对我有用：

 this.$router.currentRoute

原文由 Andre 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

可能你需要使用 $route 不是 $router

在这里检查： https ://jsfiddle.net/nikleshraut/chyLjpv0/19/

你也可以通过 $router 这样

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

原文由 Niklesh Raut 发布，翻译遵循 CC BY-SA 3.0 许可协议