如何在inertiajs和vue3中设置和更改（页面标题）

Question

我正在使用 vue3 和 inertiaJs 以及 Laravel8

如果我更改页面

，我想更改（页面的标题）

我在 Inertia 文档中查看了这段代码，但它对我不起作用，页面标题也没有改变我安装了 vue-meta

  metaInfo() {
     return() {
         title: “Home Page”,
     }
  }

Answer 1

return() 是一个属性，不是函数。 :) 所以你应该这样做：return

// parent
metaInfo: {
  meta: [{
    vmid: 'description',
    name: 'description',
    content: 'my standard description',
  }]
}

// child
metaInfo() {
  return {
    meta: [{
      vmid: 'description',
      name: 'description',
      content: this.description,
    }]
  }
},

在 this Vue doc

了解更多

Answer 2

根据 Inertia 的 v0.4.0，他们现在捆绑了自己的 inertia-head 组件，您可以使用它来添加元标记和更新标题。不再需要 vue-meta.

只需将以下内容直接添加到您的页面组件中：

<inertia-head>
  <title>Your page title</title>
  <meta name="description" content="Your page description">
</inertia-head>

您可以在 change logs of v0.4.0 中找到更多信息。

如何在inertiajs和vue3中设置和更改（页面标题）

How to set and change ( title of page ) in inertiajs and vue3

inertiajs

laravel

vue.js

vuejs3