Vue Router - cannot read query params in lazy loaded components

Question

I have a lazy loaded components in Vue Router like this:

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

But in such loaded components I'm not able to read this.$route.query. The object is always empty.

Why? Or how can I get query params in lazy loaded components?

Thanks

Answer 1

Pretty late for the party, but still got some tasty cake to share.

The problem is that when a component is lazily initialized, the route object is not avaiable inside the component constructor.

That's how I've just solved the problem.

Component route configuration:

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

You have to actually mount the app after the router is ready by taking advantage of the onReady callback. In my main.ts:

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

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

And now I can safely access the route's query inside of MyComponentView.vue constructor

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