Могу ли я получить доступ к параметрам запроса маршрутизатора при определении метаданных маршрута?

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, чтобы установить document.title на возвращаемое значение функции title, вслучаи, когда это функция:

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

Answer 2

Как сказано в документации vue router , объекты to и from в средствах защиты навигации являются объектами маршрута, подобно переменной $route, доступной в компоненте.

Следовательно, вы можете сделать это:

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