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

Question

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

javascriptjqueryvue.jsvuejs2vue-component

7

有没有可能在Vue.Js中更改高于body标签的任何内容？这两个元素的内容目前存储在附加到DOM树下面的元素中的JSON文件中。

我需要尝试注入可以被Google爬取的meta标题和描述（即它会在注入后呈现并被爬取），并了解访问body元素和DOM树更高层级的问题，因为当前的Vue JSON是使用位于较低位置的DIV上的App ID注入的。

在之前的一些工作中，我曾经使用过一些jQuery代码来解决这个问题，用于Square Space模板。

页面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/

- Gracie

4个回答

5

如果您正在使用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可能会解决大部分问题。

- Ondra

Nuxt在底层使用Vue-meta，因此只需在应用程序中使用Vue-meta即可。 Vue-meta提供了一种更清晰的设置、删除、创建或更新头部标签的方法。 - Sergiu Mare

3

如果您想更改标题，使用Vue.js很容易实现。在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可以帮助您动态更改标题。不幸的是，使用同样的方法无法更改meta描述。

- Ashutosh Batra

3

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

下面是我在Vue页面组件中使用Vue meta的示例：

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

如果您使用Vue Router（这就是我所做的），您可以在此设置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
},

- Dan Kaiser

这是Vue生态系统的最佳方法。Vue-meta提供了必要时更新头部标签的可能性。使用计算属性来实现。 - Sergiu Mare

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roy J · Accepted Answer

由于您想要更改的内容位于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'];
    })
}