如何向应用程序添加动态标题 - VueJS

Question

我已经添加了下面的路由机制

{
    path: '/home',
    meta: { title : 'Welcome Back, ' + profile.userName + ' – Dashboard | A Company' },
    name: 'home',
    component: () => import('@/views/Home.vue'),
},

我需要为每个页面添加标题。但是当我运行应用程序时，我没有看到上述内容。所以我在**Vue.app**中有以下内容@

watch: {
    '$route' (to, from) {
        document.title = to.meta.title || 'A Company'
    }
},

现在，标题加载。但是一旦 API 调用完成，它就无法选择profile.username。

API返回数据后是否可以更改标题？

Answer 1

API返回数据后是否可以更改标题？

是的，但我不知道你所有的代码，所以我不能准确地写一些你可以复制和粘贴的东西，但你可以调整它直到它工作为止。

主要的变化是让meta.title成为一个函数

{
  path: '/home',
  meta: {
    title: async function() {
      var userName = await getUsernameFromWhereverYoureGettingItFrom()
      return `Welcome Back, ${username} – Dashboard | A Company`
    }
  },
  name: 'home',
  component: () =>
    import ('@/views/Home.vue'),
},

然后调用那个函数

watch: {
    '$route': async (to, from) {
        document.title = to.meta.title ? await to.meta.title() : 'A Company'
    }
},