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

"/"

而不是

"/熊猫"

但是索引页面运行良好，它准确地显示

"/索引"

不出所料。

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

编辑：

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

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

Answer 1

有一个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

使用当前路由路径隐藏某些组件中的标头。

使用 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

Answer 6

对于 vue 3 （Composition API）

route.path如果将变量路由定义为：const route = useRoute()

使用示例

如果尝试以下操作，则每次路由路径更改时，控制台都会记录当前路径：

<script setup>
 import {useRoute} from 'vue-router'
 const route = useRoute()
 watchEffect(() => console.log(route.path))
</script>