Vue 将查询参数作为组件属性传递？

Question

使用vuejs2＆amp; vue-router3，如何采用查询参数并将其传递到路由组件的道具中？并从URL中删除查询字符串？

这是为了支持在新窗口中打开链接

Answer 1

const router = new Router({
  routes: [
    {
      path: "/",
      name: "dashboard",
      meta: {
        title: "",
        roles: ["*"]
      },
      component: DashboardView,
      props: AddQueryToPropsAndRemoveQuery
    }
  ]
});

function AddQueryToPropsAndRemoveQuery(route) {

  var props = route.params;

  if (Object.entries(route.query).length > 0) {

    // combine query params into the props
    for (const [key, value] of Object.entries(route.query)) {
      props[key] = value;
    }

    router.push({ params: props, query: undefined })
  }


  return props;
}

export default router;