title: How can Vue router get current route path of lazy-loaded modules on page load?
body: <p>I have a vue app with router set up like:</p>
  <pre><code>import index from './components/index.vue';
  import http404 from './components/http404.vue';
  
  // module lazy-loading
  const panda= () =&gt; import(/* webpackChunkName: &quot;group-panda&quot; */ &quot;./components/panda/panda.vue&quot;);
  // ...
  
  export const appRoute = [
    {
      path: &quot;&quot;,
      name: &quot;root&quot;,
      redirect: '/index'
    },
    {
      path: &quot;/index&quot;,
      name: &quot;index&quot;,
      component: index
    },
    {
      path: &quot;/panda&quot;,
      name: &quot;panda&quot;,
      component: panda
    },
    //...
    {
      path: &quot;**&quot;,
      name: &quot;http404&quot;,
      component: http404
    }
  ];
  </code></pre>
  <p>So the panda module is lazy-loaded. However, when I navigate to <code>panda</code> page, a <code>console.log()</code> of <code>this.$route.path</code> in <code>App.vue</code>'s <code>mounted()</code> lifecycle only outputs</p>
  <blockquote>
  <p>&quot;/&quot;</p>
  </blockquote>
  <p>instead of</p>
  <blockquote>
  <p>&quot;/panda&quot;</p>
  </blockquote>
  <p>But index page works well, it shows exactly</p>
  <blockquote>
  <p>&quot;/index&quot;</p>
  </blockquote>
  <p>as expected.</p>
  <p>So how can Vue router get current path correctly of a lazy-loaded page, when page is initially loaded? Did I miss something?</p>
  <p><strong>Edit:</strong></p>
  <p>It can, however, catch the correct path after Webpack hot-reloads. It catches &quot;/&quot; on first visit of <code>panda</code>, but after I change something in source code, webpack-dev-server hot-reloads, then it gets &quot;/panda&quot;.</p>
  <p>So I guess it has something to do with Vue life-cycle.</p>