一. meta标签提供关于HTML文档的元数据 (元数据指用来描述数据的数据)。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器(如何显示内容或从新加载页面)、搜索引擎(关键词搜索)、或其他web服务。
二.meta标签的特点
meta标签只能位于head元素内部。
在html中，meta标签没有结束标签。在xhtml中，meta标签必须被正确地关闭。
meta标签共有两个属性，分别是http-equiv属性和name属性。
三.通过引入vue-meta模块
无序
npm install vue-meta --save
在main.js中引入
import Meta from 'vue-meta';Vue.use(Meta);
使用
new Vue({router,data:{title:"张培跃",keywords:"玉树临风,风流倜傥,英俊潇洒,才高八斗,貌似番安",description:"这么神奇吗？都已经很难用言语来描述了"},metaInfo(){return {title: this.title,meta: [{name:"keywords",content: this.keywords},{name:"description",content: this.description}]}},render: function (h) {return h(App) }}).$mount('#app')
四.vue路由中动态设置title与meta
在router.js中创建路由：
routes:[{name:"Qq",path:"/qq",component:Qq，meta：{metaInfo：{title:"腾讯首页",keywords: "资讯,新闻,财经,房产,视频,NBA,科技,腾讯网,腾讯,QQ,Tencent",description: "腾讯网从创立至今，已经成为集新闻信息……"}}},{path: "/jd",name: "Jd",component: Jd,meta: {metaInfo: {title: "京东()-正品低价、品质保障、配送及时、轻松购物！",keywords: "网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东",description: "京东-专业的综合网上购物商城，……"}}}]
在store.js中创建状态：
import Vue from "vue";import vuex from "vuex";Vue.use(vuex);const state = {metaInfo: {title: "张培跃",keywords: "玉树临风,风流倜傥,英俊潇洒,才高八斗,貌似番安",description: "这么神奇吗？都已经很难用言语来描述了"}};const mutations = {CAHNGE_META_INFO(state, metaInfo) {state.metaInfo = metaInfo;}};export default new vuex.Store({state,mutations,})
main.js
import Vue from 'vue'import App from './App.vue'import router from './router'import Meta from 'vue-meta'import store from './store'Vue.use(Meta)Vue.config.productionTip = false;router.beforeEach((to, from, next) => {if (to.meta.metaInfo)mit("CAHNGE_META_INFO", to.meta.metaInfo)next()});new Vue({router,store,metaInfo(){return {title: this.$store.state.metaInfo.title,meta: [{name: "keywords",content: this.$store.state.metaInfo.keywords}, {name: "description",content: this.$store.state.metaInfo.description}]}},render: function (h) {return h(App)}}).$mount('#app')
————————————————
版权声明：本文为CSDN博主「张培跃吧」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：/u012149969/article/details/92709600
