使用Vue.js更改元标题和描述
在Vue.Js中，是否有可能更改比body标记更高的内容？这两个元素的内容当前存储在JSON文件中，JSON文件附加到DOM树的另一个元素中。
我需要尝试注入一个元标题和描述，可以由谷歌(即。它注入，然后在爬行之前呈现)，并理解访问body元素和在DOM树上的更高位置的问题，因为当前的Vue JSON是使用DIV下的App注入的。
在以前的一些工作中，我曾经使用过一些jQuery代码在Square空间模板上解决这个问题
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文件以固定的数组格式出现，在主体元素旁边有元详细信息。让这件事更棘手。
回答 4
Stack Overflow用户
发布于 2018-11-13 13:39:40
因为您想要更改的是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'];
})
}Stack Overflow用户
发布于 2019-03-27 07:21:33
如果您使用的是Vue路由器，我相信更干净的解决方案是使用beforeEach钩子：
const routes = [{ path: '/list', component: List, meta: {title:'List'} }]
router.beforeEach((to, from, next) => {
document.title = to.meta.title
next()
})但它只允许设置静态标题。
但是，如果您正在寻找一些SEO优化，努克斯特可能会解决大部分问题。
Stack Overflow用户
发布于 2019-07-09 18:00:38
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 meta，这样您的所有页面都可以使用它：
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
},https://stackoverflow.com/questions/53282040
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号