我在Vue路由器中有一个延迟加载的组件,如下所示:
const Login = () => import(/* webpackChunkName: "pages" */ "@/views/Pages/Login.vue");
但是在这样加载的组件中,我无法读取this.$route.query,该对象总是空的。为什么?或者我如何在延迟加载的组件中获得查询参数?谢谢
this.$route.query
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 }
1条答案
按热度按时间fcg9iug31#
参加派对已经很晚了,但还是有好吃的蛋糕可以分享。
问题是当组件被惰性初始化时,route对象在组件构造函数中不可用。
我就是这样解决问题的。
组件路由配置:
您必须在路由器就绪后利用onReady回调来实际挂载应用程序。
现在我可以安全地访问 * MyComponentView.vue * 构造函数内部的路由查询