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

Posted 2023-02-22

【中文标题】Vue路由器如何在页面加载时获取延迟加载模块的当前路由路径？

【英文标题】：How can Vue router get current route path of lazy-loaded modules on page load?

【发布时间】：2018-04-20 14:22:06

【问题描述】：

我有一个路由器设置如下的 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 热重载，然后它得到“/panda”。

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

【问题讨论】：

这个问题是很久以前问的了，最近的vue.js版本对webpack延迟加载的支持还是不错的，看来这已经不是问题了。

【参考方案1】：

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

【讨论】：

这也对我有用，这应该是公认的答案。供参考：router.vuejs.org/api/#router-currentroute

我使用这个得到“TypeError: cyclic object value”

this.$router.currentRoute.path ✔

@SuitBoyApps：是的，确实如此。

【参考方案2】：

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

在这里查看：https://jsfiddle.net/nikleshraut/chyLjpv0/19/

$router也可以这样做

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

【讨论】：

哎呀！对不起，我的意思是 $route。这是一个错字，我更正了。

不走运。当模块被延迟加载时， (this.$router).history.current.path 和 this.$route.path 都没有得到正确的路径。

我在您的示例中看到，$route 和 $router 都可以工作，在这种情况下我的“/index”也是如此。但是 /panda 是延迟加载的，它们仍然得到“/”而不是“/panda”。

【参考方案3】：

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

【讨论】：

这仅在组件中可用。 $router 在任何 js 中都可用

我在html中使用如下，它工作正常。 v-if="$router.path === '/dashboard'"

【参考方案4】：

使用当前路由路径隐藏部分组件中的Header。

使用this.$route.path获取当前路由路径

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

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

【参考方案5】：

如果您有类似的问题，正确的答案是使用 router.onReady ，然后调用有关路径的逻辑。在官方 Vue 路由器文档下方：

router.onReady

签名：

router.onReady(callback, [errorCallback])

此方法将在路由器完成初始导航时调用的回调排队，这意味着它已解析与初始路由关联的所有异步输入钩子和异步组件。

这在服务器端渲染中很有用，可确保服务器和客户端的输出一致。

第二个参数 errorCallback 仅在 2.4+ 中受支持。当初始路由解析遇到错误（例如，无法解析异步组件）时，将调用它。

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