VueJS 路由器元数据答案

【问题标题】：VueJS router meta dataVueJS 路由器元数据
【发布时间】：2020-06-23 21:51:49
【问题描述】：

我正在尝试在 Vue JS（单页应用程序）中更改应用程序的标题和描述、tweeter、fb、ig 元标记我通过在元属性中设置它成功地使标题从一个页面更改为另一个页面我的 router.js 文件。但是，如果页面（组件）用于博客文章之类的内容，我需要在导航更改时动态更改标题标签、描述和其他元标签。所以我做了这个。

export default {
    name: "Home",
    beforeRouteEnter(to, from, next){
        to.meta.title = "FTW!";
        next();
    },
    beforeRouteUpdate(to,from,next){
        to.meta.title = "FTW!";
        next();
    }
}

在 chrome 开发者工具中检查 Vuejs 选项卡时，我看到路由器实际上更新了标题值，但没有反映在浏览器窗口中，我想我需要触发刷新事件或其他东西，但我是想知道你们中是否有人知道如何正确地做到这一点。

这是一个简化的示例，我将从 API 获取博客文章并根据响应更改 meta.title。

【问题讨论】：

标签： javascript html vue.js routes meta

【解决方案1】：

根据路由动态更改很容易，只需在设置元数据时手动访问文档标题。

你可以这样做：

beforeRouteEnter(to, from, next){
        to.meta.title = "FTW!";
        document.title = to.meta.title;
        next();
    },

【讨论】：

【解决方案2】：

在 vue-routers 中，元字段不使用它来更改元标记，它们用于其他情况，例如元 requiresAuth 让您知道路由何时需要身份验证

更多信息：Route Meta Fields

您可以使用document.title，这会更改其标题选项卡，但不能确保机器人（google / fb / tw）可以读取其动态元数据，因为它们会在您的页面应用它们之前进行扫描

目前，很难处理 JavaScript，而不是所有搜索引擎爬虫能够成功或立即处理它。在未来，我们希望这个问题能够得到解决，但在同时，我们建议将动态渲染作为解决方法这个问题。动态渲染意味着在客户端之间切换为特定用户代理渲染和预渲染的内容。

https://developers.google.com/search/docs/guides/dynamic-rendering

如果你想使用动态元数据，那么你需要使用 SSR 而不是 SPA

更好的 SEO，因为搜索引擎爬虫将直接看到完整的呈现的页面。

请注意，到目前为止，Google 和 Bing 可以索引同步 JavaScript 应用就好了。同步是那里的关键词。如果你的应用程序从加载微调器开始，然后通过 Ajax 获取内容，爬虫不会等你完成。这意味着如果你有在 SEO 很重要的页面上异步获取的内容，SSR 可能是必要的。

https://ssr.vuejs.org/#what-is-server-side-rendering-ssr

然后，您可以使用包 vue-server-renderer、nuxt 或 quasar

【讨论】：

【解决方案3】：

您可以使用元标记在服务器端呈现索引文件，以便爬虫可以看到元标记。我在一篇关于如何实现这一点的文章中解决了这个问题-> Meta Tags and how to server side render them with Express + Vue.js

【讨论】：