Question

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

我需要尝试插入可被Google抓取的元标题和描述（即，在抓取之前先注入然后渲染），并理解访问body元素和更高层次的DOM树的问题，例如当前的Vue JSON使用应用ID向下插入DIV中。

我以前在以前的工作中曾使用过jQuery代码在Square Space模板上解决此问题

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

PAGE 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文件采用固定的数组格式，其中的meta细节与body元素并排。使其变得更加棘手。

https://arraydemo.netlify.com/

Answer 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'];
    })
}

Answer 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可能会解决您的大多数问题

Answer 3

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

Answer 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 将帮助您动态更改标题。不幸的是，元描述并没有用同样的方法改变。

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

4 个答案: