vue.js - 定义路由的元数据时，我可以访问路由器查询参数吗？

Question

我正在使用 Vue Router 并设置 meta 对象字段，该字段用于设置页面标题和描述。

现在我设置这样的路线:

[...
{
   path: '/page1',
   component: Page1Component,
   meta: {
      title: 'Title for page1'
   }
}
...]

然后将其与 DOM 同步:

router.beforeEach((to, from, next) => {
    document.title = to.meta.title;
    next();
});

我的一个路线，我想在标题中使用查询字符串，但我无法将函数传递给 meta 对象。有没有一种方法可以做到这一点，而无需在组件中定义标题？

例如，我想做什么:

[...
{
   path: '/page1',
   component: Page1Component,
   meta: (route) => {
      title: `dynamic title is ${route.query.param}`
   }
}
...]

Answer 1

VueRouter 不支持将路由的 meta 属性设置为您尝试执行的功能。

但您也可以将您的 title 属性设置为一个函数，该函数将您的 route 作为参数:

{
   path: '/page1',
   component: Page1Component,
   meta: {
      title: route => `dynamic title is ${route.query.param}`
   }
}

然后在 beforeEach 钩子(Hook)中添加一个检查，将 document.title 设置为 title 函数的返回值，在它是一个函数的情况:

router.beforeEach((to, from, next) => {
    const { title } = to.meta;
    document.title = typeof title === 'function' ? title(to) : title;
    next();
});