我有一个Vue Router中的懒加载组件,就像这样:
const Login = () =>
import(/* webpackChunkName: "pages" */ "@/views/Pages/Login.vue");
但是在这样的加载组件中,我无法读取this.$route.query
。该对象始终为空。
为什么?或者我如何在延迟加载的组件中获取查询参数?
谢谢
我有一个Vue Router中的懒加载组件,就像这样:
const Login = () =>
import(/* webpackChunkName: "pages" */ "@/views/Pages/Login.vue");
但是在这样的加载组件中,我无法读取this.$route.query
。该对象始终为空。
为什么?或者我如何在延迟加载的组件中获取查询参数?
谢谢
虽然有点晚了,但我还是有些好吃的蛋糕要分享。
问题在于当一个组件被惰性初始化时,在组件构造函数中路由对象不可用。
这就是我刚刚解决问题的方式。
组件路由配置:
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
}
this.$route
的结果吗? - Karma BlackshawApp.vue
中的mounted
钩子函数中,我调用了这个:console.log(this.$route)
。URL 是:http://localhost:8081/#/home?hash=now
打印出来的对象是:fullPath: "/" hash: "" matched: [] meta: {} name: null params: {} path: "/" query: {}
。整个对象看起来很奇怪。 - o..o