将 var 传递给 meta 中的 vue 路由器

【问题标题】：Pass var to vue router in meta将 var 传递给 meta 中的 vue 路由器
【发布时间】：2019-06-09 20:04:23
【问题描述】：

我有一个使用 vue-router 创建的路由。

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

在“元”中，我将其命名为我的页面名称。

我可以通过这样做来调用我的页面标题：$route.meta.title

但是现在，我遇到了一个问题。在我的页面标题中，我想传递一个变量（我的事件的名称）。

meta: {
  title: $nameOfEvent
}

怎么办？

谢谢

【问题讨论】：

【解决方案1】：

如果你将title属性定义为一个函数是可能的：

{
  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 v-title="title" ></router-view>

组件：

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

【讨论】：