vue-meta 设置页面 <meta>
一、vue-meta 安装npm install --save vue-meta二、在 main.js 使用依赖/** Copyright © 2019-2020 LiuDanYang. All rights Reserved.*/import Vue from "vue";import App from "./App.vue";import store from "./store";import
·
一、vue-meta 安装
npm install --save vue-meta
二、在 main.js 使用依赖
/*
* Copyright © 2019-2020 LiuDanYang. All rights Reserved.
*/
import Vue from "vue";
import App from "./App.vue";
import store from "./store";
import router from "./router";
// 使用 vue-meta
import Meta from "vue-meta";
Vue.use(Meta);
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
三、 页面设置固定的meta
<!--
- Copyright © 2019-2020 LiuDanYang. All rights Reserved.
-->
<template>
<div class="container"></div>
</template>
<script>
export default {
name: "Home",
data() {
return {};
},
metaInfo: {
title: "页面标题",
meta: [
{ name: "keywords", content: "页面关键字" },
{ name: "description", content: "页面描述" },
],
},
created() {},
methods: {},
};
</script>
<style lang="scss" scoped></style>
四、页面请求数据设置的meta
<!--
- Copyright © 2019-2020 LiuDanYang. All rights Reserved.
-->
<template>
<div class="container"></div>
</template>
<script>
export default {
name: "Home",
data() {
return {
setting: {
title: "",
keywords: "",
description: "",
},
};
},
metaInfo() {
return {
title: this.setting.title,
meta: [
{ name: "keywords", content: this.setting.keywords },
{ name: "description", content: this.setting.description },
],
};
},
created() {
this.getSetting();
},
methods: {
// 模拟接口获取数据
setTimeout(() => {
this.setting.title = "页面标题";
this.setting.keywords = "页面关键字";
this.setting.description = "页面描述";
}, 2000);
},
};
</script>
<style lang="scss" scoped></style>
五、效果
参考:vue-meta 、vue-meta 文档
更多推荐
已为社区贡献16条内容
所有评论(0)