使用vue-meta之前,要想改变页面的title
document.title = 'xxxxxx'
使用vue-meta之后,
<template>
<div class="container"></div>
</template>
<script>
export default {
name: "Home",
data() {
return {};
},
metaInfo: {
title: "页面标题",
meta: [],
},
created() {},
methods: {},
};
</script>
如果要设置属性
<script>
export default {
metaInfo: {
title: 'My Example App',
titleTemplate: '%s - Yay!',
htmlAttrs: {
lang: 'en',
amp: true
}
}
}
</script>
渲染出来的结构为:
<html lang="en" amp>
<head>
<title>My Example App - Yay!</title>
...
</head>
vue中使用方法
1.安装
npm install vue-meta --save
2.vue中引用
import Vue from 'vue'
import VueMeta from 'vue-meta'
Vue.use(VueMeta, {
refreshOnceOnNavigation: true
})