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'
    }
},

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

1 个答案: