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页面时，console.log() of this.$route.path在App.vue的mounted()生命周期中只输出。

"/“

而不是

"/panda“

但是索引页工作得很好，它准确地显示了。

"/index“

如预期的那样。

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

编辑：

然而，在Webpack热重装之后，它可以抓住正确的路径.它在第一次访问panda时捕捉到"/“，但是在我修改源代码、webpack开发服务器热重加载之后，它就得到了"/panda”。

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

Answer 1

有一个为我工作的currentRoute属性：

this.$router.currentRoute

Answer 2

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

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

您也可以通过$router这样做。

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

Answer 3

使用this.$route.path。简单有效。