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

bwntbbo3  于 2023-01-26  发布在  Vue.js
关注(0)|答案(1)|浏览(115)

我在Vue路由器中有一个延迟加载的组件,如下所示:

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

但是在这样加载的组件中,我无法读取this.$route.query,该对象总是空的。
为什么?或者我如何在延迟加载的组件中获得查询参数?
谢谢

fcg9iug3

fcg9iug31#

参加派对已经很晚了,但还是有好吃的蛋糕可以分享。
问题是当组件被惰性初始化时,route对象在组件构造函数中不可用。
我就是这样解决问题的。
组件路由配置:

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

您必须在路由器就绪后利用onReady回调来实际挂载应用程序。

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
}

相关问题