Передайте var в vue router в мета

Question

У меня есть маршрут, созданный с помощью vue-router.

{
    path: '/events/:id',
    component: Event,
    name: 'Event',
    meta: {
        title: 'Design Web'
    }
},

В «мета» я даю название моей страницы.

Я могу назвать заголовок своей страницы следующим образом: $route.meta.title

Но теперь я столкнулся с проблемой.В заголовке моей страницы я хотел бы передать переменную (название моего мероприятия).

meta: {
  title: $nameOfEvent
}

Как это сделать?

Спасибо

Answer 1

Это возможно, если вы определите атрибут заголовка как функцию:

{
  meta: { title: route => { /* return custom title based on route, store or anything */ } }
}

и

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

Codepen: https://codepen.io/anon/pen/roRmdo?editors=1111 (вам нужно проверить внутренний iframe, чтобы увидеть изменение названия).

или создайте директиву:

Vue.directive('title', {
  inserted: (el, binding) => document.title = binding.value,
  update: (el, binding) => document.title = binding.value
})

Затем используйте эту директиву в компоненте router-view:

<router-view v-title="title" ></router-view>

Компонент:

export default {
  data(){
    return {
      title: 'This will be the title'
    }
  }
}

Источник: https://github.com/vuejs/vue-router/issues/914