使用 Vue.js 更改元标题和描述答案

【问题标题】：Change Meta Title and Description using Vue.js使用 Vue.js 更改元标题和描述
【发布时间】：2019-04-16 08:20:12
【问题描述】：

是否可以在 Vue.Js 中更改高于 body 标签的内容？这两个元素的内容当前都存储在 JSON 文件中，该文件附加到 DOM 树更下方的元素。

我需要尝试注入一个可以被 Google 抓取的元标题和描述（即，它注入，然后在被抓取之前呈现）并了解访问 body 元素和更高层 DOM 树的问题，如当前的 Vue JSON 是使用 DIV 下方的 App ID 注入的。

我之前在之前的一些工作中使用了一些 jQuery 代码来解决 Square Space 模板上的这个问题

jQuery('meta[name=description]').attr('content', 'Enter Meta Description Here');

页面 HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="{{items[0][0].meta-desc}}">
  <meta name="author" content="">
  <title>{{items[0][0].meta-title}}</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <!-- Vue.js CDN -->
  <script src="https://unpkg.com/vue"></script>
</head>

<body>
  <!-- Page List -->
  <div class="container text-center mt-5" id="app">
      <h1 class="display-4">Vue Page Output:</h1>
      <h2>{{items[0][0].page1}}</h2>
  </div>
  <div class="container text-center mt-5">
    <h3>Other Pages</h3>
    <a href="products.html">Products</a>
    <a href="contactus.html">Contact Us</a>
</div>
  <!-- /.container -->

  <script type="text/javascript">
    const app = new Vue({
      el: '#app',
      data: {
        items: []
      },
      created: function () {
        fetch('test.json')
          .then(resp => resp.json())
          .then(items => {
            this.items = items
          })
      }
    });
  </script>
</body>

</html>

JSON

  [
    [
    {
        "page1": "Company Name",
        "meta-title": "Acme Corp"
        "meta-desc": "Welcome to Acme Corp"
    }
    ],
    [
    {
        "products": "Product List"
    }
    ],
    [
    {
        "contactus": "Contact Us at Acme Corp"
    }
  ]

下面是实际代码，传入的 JSON 文件采用固定数组格式，其中包含元详细信息以及正文元素。让这变得更棘手。

https://arraydemo.netlify.com/

【问题讨论】：

标签： javascript jquery vue.js vuejs2 vue-component

【解决方案1】：

由于您要更改的内容超出了 Vue 控制的区域，因此您只需使用普通的 DOM 操作即可。会是这样的

created() {
  fetch('test.json')
    .then(resp => resp.json())
    .then(items => {
      this.items = items;
      const descEl = document.querySelector('head meta[name="description"]');
      const titleEl = document.querySelector('head title');

      descEl.setAttribute('content', items[0]['meta-desc']);
      titleEl.textContent = items[0]['meta-title'];
    })
}

【讨论】：

感谢 Roy J。这真是一种享受 - 现在更新了网站。所以这只是普通的 JS，但在 Vue 方法中，因为它被用于 JSON 响应，对吗？我确定我在教程中听说过关于 Vue 中使用元素的某种组件方式，但这会很好。
不想设置任何复杂的东西。这对我来说很好！谢谢你。
@Roy J 标题内容是变化的。但是如果我右键单击该网站并选择查看页面源，我会看到标题、描述和关键字没有改变
@SuccessMan 查看页面源有效地下载了新页面。在 JavaScript 中更新的任何内容都不会在那里更改。
@Roy J 所以实际上这种方式不支持 SEO

【解决方案2】：

如果您使用的是 Vue Router，我相信更清洁的解决方案是使用 beforeEach 钩子：

const routes = [{ path: '/list', component: List, meta: {title:'List'} }]

router.beforeEach((to, from, next) => {
    document.title = to.meta.title
    next()
})

但它只允许您设置静态标题。

但是，如果您正在寻找一些 SEO 优化，Nuxt 可能会解决您的大部分问题

【讨论】：

Nuxt 在后台使用 Vue-meta，所以只需在您的应用程序中使用 Vue-meta。 Vue-meta 提供了一种更简洁的方式来设置、删除、创建或更新 head 标签。

【解决方案3】：

Vue meta 是一个用于元数据管理的 NPM 包： https://vue-meta.nuxtjs.org/

我如何在 vue 页面组件中使用它的示例：

export default {
name: "Contact",
 metaInfo: function() {
   return {
     title: "My page meta title",
     meta: [
     { name: 'description', content:  "My page meta description" }
    ]
  }
 }

如果你使用 Vue 路由器（这就是我正在做的），你可以在这里设置 Vue 元数据，这样你的所有页面都可以使用它：

import Vue from 'vue'
import Router from 'vue-router'
import VueMeta from 'vue-meta'


Vue.use(Router)
Vue.use(VueMeta)

export default new Router({
mode: 'history',
base: '/',
routes: [
{
  path: '/',
  name: 'Home',
  component: Home
},

【讨论】：

这是 Vue 生态系统的最佳方法。如果需要，Vue-meta 提供了更新 head 标签的可能性。为此使用计算属性。

【解决方案4】：

如果要更改标题，在 vuejs 中很容易更改。

在 router.js 文件中创建路由时，您可以执行以下操作。

{
    path:"/productdetail",
    name:"productdetail",
    component:ProductDetail,
    meta: {
        title : localStorage.getItem("title"),
    }
    
}

router.beforeEach((toRoute,fromRoute,next) => {
   window.document.title = toRoute.meta.title;
   next();
})

使用 localStorage 将帮助您动态更改标题。不幸的是，元描述并没有用同样的方法改变。

【讨论】：