web-dev-qa-db-ja.com

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

したがって、pandaモジュールは遅延ロードされます。ただし、pandaページに移動すると、this.$route.pathのmounted()ライフサイクルのApp.vueのc​​onsole.log（）のみが出力されます

「/」

の代わりに

"/パンダ"

しかし、インデックスページはうまく機能し、正確に表示されます

「/ index」

予想通り。

では、ページが最初にロードされたときに、Vueルーターが遅延ロードされたページの現在のパスを正しく取得する方法を教えてください。私は何か見落としてますか？

編集：

ただし、Webpackのホットリロード後に正しいパスをキャッチできます。 pandaの最初の訪問で "/"をキャッチしますが、ソースコードでwebpack-dev-server hot-reloadを変更すると、 "/ panda"になります。

Vueライフサイクルと関係があると思います。

javascriptvue.jsvue-router
24
Valorad

$routeではなく$routerを使用する必要があるかもしれません

ここで確認してください： https://jsfiddle.net/nikleshraut/chyLjpv0/19/

$routerこの方法でもできます

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

27
Niklesh Raut

私のために働いたcurrentRouteプロパティがあります：this.$router.currentRoute

25
Andre

this.$route.pathを使用します。シンプルで効果的。

8
Nuno Ribeiro