Vue路由器 - 无法在延迟加载的组件中读取查询参数

Question

我有一个Vue Router中的懒加载组件，就像这样：

const Login = () =>
  import(/* webpackChunkName: "pages" */ "@/views/Pages/Login.vue");

但是在这样的加载组件中，我无法读取this.$route.query。该对象始终为空。

为什么？或者我如何在延迟加载的组件中获取查询参数？

谢谢

- o..o

---

你能展示一下 this.$route 的结果吗？ - Karma Blackshaw

在 App.vue 中的 mounted 钩子函数中，我调用了这个：console.log(this.$route)。URL 是：http://localhost:8081/#/home?hash=now 打印出来的对象是：fullPath: "/" hash: "" matched: [] meta: {} name: null params: {} path: "/" query: {}。整个对象看起来很奇怪。 - o..o

Answer 1

虽然有点晚了，但我还是有些好吃的蛋糕要分享。

问题在于当一个组件被惰性初始化时，在组件构造函数中路由对象不可用。

这就是我刚刚解决问题的方式。

组件路由配置：

const routes: Array<RouteConfig> = [
  {
    path: "/my-comp",
    name: "MyComponent",
    component: () =>
      import(/* webpackChunkName: "MyComponent" */ "../views/MyComponentView.vue"),
  },
]

在路由器准备好后，您必须利用 onReady 回调函数来实际挂载应用程序。在我的 main.ts 文件中：

const vue = new Vue({
  router,
  store,
  vuetify,
  render: (h) => h(App),
});

router.onReady(() => {
  vue.$mount("#app");
});

现在我可以安全地访问MyComponentView.vue构造函数中的路由查询

constructor() {
  super();
  this.$route.query.selectedItem; // correctly initialized
}

- pizzaboy