Gra*_*cie 5 javascript jquery vue.js vue-component vuejs2
是否可以更改 Vue.Js 中高于 body 标签的任何内容？这两个元素的内容当前存储在 JSON 文件中，该文件附加到 DOM 树更下方的元素。
我需要尝试注入一个可以被谷歌抓取的元标题和描述（即它注入，然后在它被抓取之前呈现）并了解访问 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 文件采用固定数组格式，元详细信息与正文元素一起显示。使这更加棘手。
既然你要改变的不在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'];
})
}
如果您使用的是 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可能会解决您的大部分问题
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 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
},