Vue 路由器如何在页面加载时获取延迟加载模块的当前路由路径? [英] How can Vue router get current route path of lazy-loaded modules on page load?

问题描述

我有一个带有路由器的 vue 应用程序，如下所示:

I have a vue app with router set up like:

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

So the panda module is lazy-loaded. However, when I navigate to panda page, a console.log() of this.$route.path in App.vue's mounted() lifecycle only outputs

"/"

代替

"/熊猫"

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

But index page works well, it shows exactly

"/索引"

正如预期的那样.

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

So how can Vue router get current path correctly of a lazy-loaded page, when page is initially loaded? Did I miss something?

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

It can, however, catch the correct path after Webpack hot-reloads. It catches "/" on first visit of panda, but after I change something in source code, webpack-dev-server hot-reloads, then it gets "/panda".

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

So I guess it has something to do with Vue life-cycle.

推荐答案

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

There is a currentRoute property that worked for me: this.$router.currentRoute

这篇关于Vue 路由器如何在页面加载时获取延迟加载模块的当前路由路径?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！