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

＆＃34; /＆＃34;

而不是

＆＃34; /熊猫＆＃34;

但索引页面运行良好，它显示正好

＆＃34; /索引＆＃34;

正如所料。

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

修改：

但是，它可以在Webpack热重载之后捕获正确的路径。它抓住＆＃34; /＆＃34;在第一次访问panda时，但在我更改了源代码中的某些内容后，webpack-dev-server热重新加载，然后它获得＆＃34; / panda＆＃34;。

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

Answer 1

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

点击此处：https://jsfiddle.net/nikleshraut/chyLjpv0/19/

你也可以$router这样做

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

Answer 2

有iterator属性对我有用：const_iterator

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://router.vuejs.org/api/#router-onready

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

5 个答案:

使用当前路线路径将标头隐藏在某些组件中。