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模塊是延遲加載的。 但是，當我導航到panda頁面時， App.vue的mounted()生命周期中this.$route.path的 console.log() 只輸出

“/”

代替

“/熊貓”

但是索引頁面運行良好，它顯示准確

“/索引”

正如預期的那樣。

那么，當頁面最初加載時，Vue 路由器如何正確獲取延遲加載頁面的當前路徑？ 我錯過了什么？

編輯：

但是，它可以在 Webpack 熱重載后捕獲正確的路徑。 它在第一次訪問panda捕獲“/”，但是在我更改源代碼中的某些內容后，webpack-dev-server hot-reloads，然后它得到“/panda”。

所以我想這與 Vue 生命周期有關。

Answer 1

有一個currentRoute屬性對我this.$router.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 。 簡單有效。

Answer 4

使用當前路由路徑隱藏某些組件中的 Header。

使用this.$route.path獲取當前路由路徑

<navigation v-if="showNavigation"></navigation>

data() {
    this.$route.path === '/' ? this.showNavigation = false : this.showNavigation = true
}

Answer 5

如果您有類似的問題，正確的答案是使用 router.onReady 然后調用有關路徑的邏輯。 在官方 Vue 路由器文檔下方：

router.onReady

簽名：

router.onReady(callback, [errorCallback])

當路由器完成初始導航時，此方法將要調用的回調排隊，這意味着它已解析與初始路由關聯的所有異步輸入鈎子和異步組件。

這在服務器端渲染中很有用，可確保服務器和客戶端上的輸出一致。

第二個參數 errorCallback 僅在 2.4+ 中受支持。 當初始路由解析遇到錯誤（例如無法解析異步組件）時，它將被調用。

來源： https : //router.vuejs.org/api/#router-onready