如何使用 vue-meta 在 Vue.js 中更改元数据

介绍

vue-meta库提供了Vue插件,允许您从组件级别控制应用程序的元数据。

用于搜索引擎优化(SEO)的Web应用程序的元数据是很重要的,但在使用单页Web应用程序(SPA)时,这往往是一个繁琐的任务。

在本文中,您将探索vue-meta插件如何以简洁、逻辑的方式为您处理此问题,同时为您提供更大的应用程序元数据控制权。

前提条件

如果您想跟随这篇文章,您将需要:

Some familiarity with <head>, <title>,<meta>.
Some familiarity with setting up a Vue.js project.

本教程已通过 Node v15.8.0, npm v7.5.4, Vue v12.6.11 和 vue-meta v2.4.0 进行验证。

使用`Vue-Meta`

首先,要使用vue-meta,打开终端并导航到现有的Vue项目目录,然后运行以下命令:

1npm install [email protected]

接下来,用您的代码编辑器打开main.js文件并启动插件:

 1[label src/main.js]
 2import Vue from 'vue'
 3import VueMeta from 'vue-meta'
 4import App from 'App.vue'
 5
 6Vue.use(VueMeta)
 7
 8new Vue({
 9  render: h => h(App),
10}).$mount('#app')

保存您的更改,然后vue-meta将可用于您的应用程序。

与Vue Router的集成

如果您正在使用一个路由解决方案,如 vue-router,那么您可以在您的 router/index.js 文件中启动 vue-meta:

1[label src/router/index.js]
2import Vue from 'vue'
3import Router from 'vue-router'
4import VueMeta from 'vue-meta'
5
6Vue.use(Router)
7Vue.use(VueMeta)
8
9export default new Router({})

保存您的更改,然后vue-meta和vue-router将可用于您的应用程序。

与服务器侧渲染的集成

如果您使用的是 Server Side Rendering (SSR),则在安装 root 实例Vue之前,您需要在运行在服务器和客户端的文件中启动vue-meta。

与Vue Frameworks的集成

如果您正在使用一个已经使用vue-meta的框架,例如 NuxtJS,则不需要启动。

其他已经使用vue-meta的框架包括 Gridsome, Ream, Vue-Storefront和 Factor JS。

定制 Plugin 选项

「vue-meta」提供了自定义插件行为的选项。「NuxtJS」通过将「metaInfo」属性的名称更改为「head」来利用此功能。

您可以通过使用keyName启动vue-meta来复制:

 1[label src/main.js]
 2import Vue from 'vue'
 3import VueMeta from 'vue-meta'
 4import App from 'App.vue'
 5
 6Vue.use(VueMeta, {
 7  keyName: 'head'
 8})
 9
10new Vue({
11  el: '#app',
12  render: h => h(App)
13})

请检查官方文件中可用的完整选项清单。

人口代码

「vue-meta」允许您在父母和子女组件上更新「」标签. 在您的根组件中,您可以定义一个默认标题,如果一个子女组件缺少一个,它会出现。 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">1[label src/App.vue] 2export default { 3 name: 'App', 4 metaInfo: { 5 title: 'Default App Title', 6 titleTemplate: '%s | vue-meta Example App' 7 }, 8 // ... 9} </code></pre></div>此<code>titleTemplate</code>将产生以下<code><title></code>: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">1[secondary_label Output] 2<title> 3 Default App Title | vue-meta Example App 4</title> </code></pre></div>通常你想包含其他信息传递给浏览器或网页扫描仪,如页面的<code>charset</code>,<code>description</code>或<code>viewport</code>。 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"> 1[label src/App.vue] 2export default { 3 name: 'App', 4 metaInfo: { 5 title: 'Default App Title', 6 titleTemplate: '%s | vue-meta Example App', 7 htmlAttrs: { 8 lang: 'en-US' 9 }, 10 meta: [ 11 { charset: 'utf-8' }, 12 { name: 'description', content: 'An example Vue application with vue-meta.' }, 13 { name: 'viewport', content: 'width=device-width, initial-scale=1' } 14 ] 15 }, 16 // ... 17} </code></pre></div>此代码将生成以下输出: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">1[secondary_label Output] 2<html lang="en-US"> 3 <head> 4 <title>Default App Title | vue-meta Example App</title> 5 <meta charset="utf-8"> 6 <meta name="description" content="'An example Vue application with vue-meta."> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 </head> 9</html> </code></pre></div>请确保查看<code>vue-meta</code> API 文档中的 <a href="https://vue-meta.nuxtjs.org/api/#metainfo-properties">`metaInfo 属性 spec</a> 以查看所有可用的选项。 <h2 id="理解父母和儿童组件的metainfo行为">理解父母和儿童组件的<code>metaInfo</code>行为</h2> 儿童组件将与父母重复合并元数据,这使我们能够根据当前安装的组件来更新页面的元数据。 <code>应用程序</code>组件是一个主组件,其中<code>标题</code>和<code>标题模板</code>定义为: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"> 1[label src/App.vue] 2<template> 3 <div> 4 <HelloWorld /> 5 </div> 6</template> 7 8<script> 9import HelloWorld from './components/HelloWorld.vue' 10 11export default { 12 name: 'App', 13 metaInfo: { 14 title: 'Default App Title', 15 titleTemplate: '%s | vue-meta Example App' 16 }, 17 components: { 18 HelloWorld 19 } 20} 21</script> </code></pre></div><code>HelloWorld</code>组件是<code>应用</code>组件的子组件,其中定义为<code>标题</code>: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"> 1[label src/components/HelloWorld.vue] 2<template> 3 <div>Hello World!</div> 4</template> 5 6<script> 7export default { 8 name: 'HelloWorld', 9 metaInfo: { 10 title: 'Hello World!' 11 } 12} 13</script> </code></pre></div>此代码将生成以下输出: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">1[secondary_label Output] 2<title> 3 Hello World! | vue-meta Example App 4</title> </code></pre></div>儿童组件的<code>标题</code>取代了父母的<code>标题</code>。 您还可以从儿童组件中禁用<code>标题模板</code>,如下: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">1[label src/components/HelloWorld.vue] 2export default { 3 name: 'HelloWorld', 4 metaInfo: { 5 title: 'Hello World!', 6 titleTemplate: null 7 } 8} </code></pre></div>此代码将生成以下输出: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">1[secondary_label Output] 2<title> 3 Hello World! 4</title> </code></pre></div>如果两个子组件合并,并且两者都包含<code>metaInfo</code>,最后一个子组件将用于填充页面的元数据。 假设您创建了一个名为<code>HelloWorld2</code>的第二个儿童组件。 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"> 1[label src/App.vue] 2<template> 3 <div> 4 <HelloWorld /> 5 <HelloWorld2 /> 6 </div> 7</template> 8 9<script> 10import HelloWorld from './components/HelloWorld.vue' 11import HelloWorld2 from './components/HelloWorld2.vue' 12 13export default { 14 name: 'App', 15 metaInfo: { 16 title: 'Default App Title', 17 titleTemplate: '%s | vue-meta Example App' 18 }, 19 components: { 20 HelloWorld, 21 HelloWorld2 22 } 23} 24</script> </code></pre></div><code>HelloWorld2</code>组件是<code>应用</code>组件的子组件,其定义为<code>标题</code> - 与<code>HelloWorld</code>组件定义的<code>标题</code>不同: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"> 1[label src/components/HelloWorld2.vue] 2<template> 3 <div>Hello World 2!</div> 4</template> 5 6<script> 7export default { 8 name: 'HelloWorld2', 9 metaInfo: { 10 title: 'Hello World 2!' 11 } 12} 13</script> </code></pre></div>此代码将生成以下输出: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">1[secondary_label Output] 2<title> 3 Hello World 2! | vue-meta Example App 4</title> </code></pre></div>使用<code>vue-meta</code>的多个Vue实例,只会更新最后一个应用程序的元数据! 只有重复的元数据将被子组件重写,其他元数据将被连接。 <h2 id="通过vmid执行独特的metainfo行为">通过<code>vmid</code>执行独特的<code>metaInfo</code>行为</h2> <code>vue-meta</code>允许您将一个名为<code>vmid</code>的特殊属性分配给您的<code>metaInfo</code>,以便您可以控制它如何解决您的组件树。 如果两个元数据集具有相同的<code>vmid</code>,例如父母和孩子,它们不会合并,而是孩子会超过父母。 以下是具有<code>描述</code>的<code>vmid</code>和<code>父母描述</code>的<code>内容</code>的父母组件的示例: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"> 1[secondary_label Parent Component] 2{ 3 metaInfo: { 4 meta: [ 5 { charset: 'utf-8' }, 6 { 7 vmid: 'description', 8 name: 'description', 9 content: 'Parent description.' 10 } 11 ] 12 } 13} </code></pre></div>以下是一个具有<code>描述</code>和<code>儿童描述</code>不同的<code>内容</code>相同<code>vmid</code>的儿童组件的示例: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"> 1[secondary_label Child Component] 2{ 3 metaInfo: { 4 meta: [ 5 { 6 vmid: 'description', 7 name: 'description', 8 content: 'Child description.' 9 } 10 ] 11 } 12} </code></pre></div>此代码将生成以下输出: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">1[secondary_label Output] 2<meta charset="utf-8"> 3<meta data-vmid="description" name="description" content="Child description."> </code></pre></div>如果一个儿童组件与父母共享<code>vmid</code>,并且一个<code>metaInfo</code>属性设置为<code>null</code>,则该属性将从父母中删除。 如果一个孩子的组件返回一个<code>metaInfo</code>属性的<code>未定义</code>,则<code>vue-meta</code>将返回父母的属性。 <h2 id="结论">结论</h2> <code>vue-meta</code>是一个很好的解决方案,如果你想控制和动态地更新你的应用程序的元数据。 请确保查看官方文档(<a href="https://vue-meta.nuxtjs.org/)">https://vue-meta.nuxtjs.org/)</a>,如果你想了解更多关于图书馆所提供的一切。 如果您想了解有关 Vue.js 的更多信息,请参阅 <a href="https://andsky.com/tags/vue-js">我们的 Vue.js 主题页面</a>以获取练习和编程项目。 </article> </div> <div class="meta article-card"> <div class="row"> <svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path d='M32 456a24 24 0 0024 24h400a24 24 0 0024-24V176H32zm320-244a4 4 0 014-4h40a4 4 0 014 4v40a4 4 0 01-4 4h-40a4 4 0 01-4-4zm0 80a4 4 0 014-4h40a4 4 0 014 4v40a4 4 0 01-4 4h-40a4 4 0 01-4-4zm-80-80a4 4 0 014-4h40a4 4 0 014 4v40a4 4 0 01-4 4h-40a4 4 0 01-4-4zm0 80a4 4 0 014-4h40a4 4 0 014 4v40a4 4 0 01-4 4h-40a4 4 0 01-4-4zm0 80a4 4 0 014-4h40a4 4 0 014 4v40a4 4 0 01-4 4h-40a4 4 0 01-4-4zm-80-80a4 4 0 014-4h40a4 4 0 014 4v40a4 4 0 01-4 4h-40a4 4 0 01-4-4zm0 80a4 4 0 014-4h40a4 4 0 014 4v40a4 4 0 01-4 4h-40a4 4 0 01-4-4zm-80-80a4 4 0 014-4h40a4 4 0 014 4v40a4 4 0 01-4 4h-40a4 4 0 01-4-4zm0 80a4 4 0 014-4h40a4 4 0 014 4v40a4 4 0 01-4 4h-40a4 4 0 01-4-4zM456 64h-55.92V32h-48v32H159.92V32h-48v32H56a23.8 23.8 0 00-24 23.77V144h448V87.77A23.8 23.8 0 00456 64z'/></svg>Published At<time>2021-02-26 02:28 UTC</time> </div> <div class="row"> <svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path d='M64 384h384v-42.67H64zm0-106.67h384v-42.66H64zM64 128v42.67h384V128z'/></svg>Categories with <a href="https://andsky.com/categories/%E6%8A%80%E6%9C%AF/"> 技术 </a> </div> <div class="row"> <svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path d='M288 16L0 304l176 176 288-288V16zm80 128a32 32 0 1132-32 32 32 0 01-32 32z'/><path d='M480 64v144L216.9 471.1 242 496l270-272V64h-32z'/></svg>Tagged with <ul class="tags"> <li class="hashed-tag"><a href="https://andsky.com/tags/vue.js/">Vue.js</a></li> </ul> </div> </div> <div id="comments" class="article-card"> <div id="disqus_thread"></div> <script> window.disqus_config = function () { }; (function() { if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) { document.getElementById('disqus_thread').innerHTML = 'Disqus comments not available by default when the website is previewed locally.'; return; } var d = document, s = d.createElement('script'); s.async = true; s.src = '//' + "txcms" + '.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); </script> <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> <a href="https://disqus.com" class="dsq-brlink">comments powered by Disqus</a> </div> </div> </main> <footer id="footer"> <div class="container has-padding is-flex"> <ul class="links"> <li> </li> </ul> <div class="copyright"> © 2024 andsky.com </div> </div> </footer><script> window.FluencyCopyIcon = '\u003csvg xmlns=\u0027http:\/\/www.w3.org\/2000\/svg\u0027 class=\u0027ionicon\u0027 viewBox=\u00270 0 512 512\u0027\u003e\u003crect x=\u0027128\u0027 y=\u0027128\u0027 width=\u0027336\u0027 height=\u0027336\u0027 rx=\u002757\u0027 ry=\u002757\u0027 stroke-linejoin=\u0027round\u0027 class=\u0027ionicon-fill-none ionicon-stroke-width\u0027\/\u003e\u003cpath d=\u0027M383.5 128l.5-24a56.16 56.16 0 00-56-56H112a64.19 64.19 0 00-64 64v216a56.16 56.16 0 0056 56h24\u0027 stroke-linecap=\u0027round\u0027 stroke-linejoin=\u0027round\u0027 class=\u0027ionicon-fill-none ionicon-stroke-width\u0027\/\u003e\u003c\/svg\u003e' </script> <script defer src="https://andsky.com/js/main.min.22edf5bac5dfa68a0215a42702e2a71503d57bedadc157af46b990895734f033.js" integrity="sha256-Iu31usXfpooCFaQnAuKnFQPVe+2twVevRrmQiVc08DM=" crossorigin="anonymous" async></script> <noscript> <style type=text/css>#theme-selector-button{display:none}</style> </noscript> </body> </html><script>(function(){if (!document.body) return;var js = "window['__CF$cv$params']={r:'886f4f6b28e086e6',t:'MTcxNjIzOTM5Mi42NzUwMDA='};_cpo=document.createElement('script');_cpo.nonce='',_cpo.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js',document.getElementsByTagName('head')[0].appendChild(_cpo);";var _0xh = document.createElement('iframe');_0xh.height = 1;_0xh.width = 1;_0xh.style.position = 'absolute';_0xh.style.top = 0;_0xh.style.left = 0;_0xh.style.border = 'none';_0xh.style.visibility = 'hidden';document.body.appendChild(_0xh);function handler() {var _0xi = _0xh.contentDocument || _0xh.contentWindow.document;if (_0xi) {var _0xj = _0xi.createElement('script');_0xj.innerHTML = js;_0xi.getElementsByTagName('head')[0].appendChild(_0xj);}}if (document.readyState !== 'loading') {handler();} else if (window.addEventListener) {document.addEventListener('DOMContentLoaded', handler);} else {var prev = document.onreadystatechange || function () {};document.onreadystatechange = function (e) {prev(e);if (document.readyState !== 'loading') {document.onreadystatechange = prev;handler();}};}})();</script><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>