javascript - VueJS 路由器元数据

问题描述

我正在尝试更改 Vue JS（单页应用程序）中应用程序的标题和描述、高音扬声器、fb、ig 元标记我通过在路由器的元属性中设置它成功地使标题从一个页面更改到另一个页面.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。

标签： javascripthtmlvue.jsroutesmeta

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

更多信息：路由元字段

您可以使用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

javascript - VueJS 路由器元数据

问题描述

解决方案

推荐阅读