如何在路由vue js中调用元标题中的参数

Question

我尝试在元标题路由中调用参数时遇到问题，

我已经尝试过这样但仍然无法正常工作

{
    path: '/test/blog/:slug',
    name: 'Surah',
    component: Surah,
    meta: { title: 'My Blog - 'this.$route.params.slug}
  }

你能帮我解决这个问题吗？我的页面标题中需要这样的东西

My Blog - Foo Bar Test 123

Answer 1

为此，您需要一个函数 - 静态字符串分配不起作用。 afterEach 全局路由挂钩将帮助您：

{
    path: '/test/blog/:slug',
    name: 'Surah',
    component: Surah,
    meta: { title: 'My Blog - '}
}

router.afterEach((to, from) =>
{
  document.title = to.meta.title ? to.meta.title + to.params.slug : 'My Default title';
});