我正在使用 vue3 和 inertiaJs 以及 Laravel8
如果我更改页面，我想更改（页面标题）
我在 Inertia 文档中检查了这段代码，但它对我不起作用，并且页面标题没有改变 我安装了 vue-meta
metaInfo() {
return() {
title: “Home Page”,
}
}
return()return// parent
metaInfo: {
meta: [{
vmid: 'description',
name: 'description',
content: 'my standard description',
}]
}
// child
metaInfo() {
return {
meta: [{
vmid: 'description',
name: 'description',
content: this.description,
}]
}
},
了解更多信息此 Vue 文档
在“inertia-vue3”中，我们如何知道“描述”发生了变化？
import { Head } from '@inertiajs/inertia-vue3'
<Head>
<title>About - My app</title>
<meta head-key="description" name="description" content="This is a page specific description" />
</Head>
在view-source中，什么也看不懂！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>test</title>
<body>
</body>
</html>
根据 Inertia v0.4.0，他们现在捆绑自己的
inertia-headvue-meta只需将以下内容直接添加到您的页面组件中即可：
<inertia-head>
<title>Your page title</title>
<meta name="description" content="Your page description">
</inertia-head>
您可以在 v0.4.0 的变更日志中找到更多信息。
在正在渲染的 Vue 文件中：
<template>
<!-- You can do it like this if you only setting title -->
<Head :title="Home Page" />
<!-- Or if you want to set other meta you can do the following -->
<Head>
<title>Home Page</title>
<meta name="description" content="Page description">
</Head>
</template>
<script>
import { Head } from '@inertiajs/vue3';
export default {
components: {
Head,
},
// ...
};
</script>
当然，您需要确保您的应用程序正在设置标题，
createInertiaAppapp.jscreateInertiaApp({
title: (title) => title ? `${title} - ${appName}` : appName,
// ...
})