Vue router 如何在页面加载时获取懒加载模块的当前路由路径？

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

"/"

而不是

"/panda"

但索引页效果很好，显示准确

"/index"

符合预期。

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

编辑：

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

所以我猜这与 Vue 生命周期有关。

Answer 1

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

在此处查看：https://jsfiddle.net/nikleshraut/chyLjpv0/19/

你也可以$router这样

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

Answer 2

有一个 currentRoute 属性对我有用：

this.$router.currentRoute

Answer 3

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

Answer 4

使用当前路由路径在某些组件中隐藏页眉。

get current route path using 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://v3.router.vuejs.org/api/#router-onready

Vue router 如何在页面加载时获取懒加载模块的当前路由路径？

How can Vue router get current route path of lazy-loaded modules on page load?

javascript

vue.js

vue-router

使用当前路由路径在某些组件中隐藏页眉。