vuex结合vue-meta实现router动态设置meta标签
网站的访问流量中，有相当一部分都是来自于搜索引擎，而来自于搜索引擎的流量又全部是免费的，所以网站的SEO(Search Engine Optimization 搜索引擎优化)是实现自我营销的一种最直接且最有效的手段。而SEO往往又都是从优化meta标签开始的！
一、meta标签介绍
meta标签提供关于HTML文档的元数据(元数据指用于描述数据的数据)。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
二、meta标签的特点
1、meta 标签只能位于 head 元素内部。
2、在HTML中，meta 标签没有结束标签。在 XHTML 中，meta 标签必须被正确地关闭。
3、meta标签共有两个属性，分别是http-equiv属性和name属性。
三、SEO 优化部分
关于meta标签的用法实现太多了，在此就不在一一赘述了。现将SEO优化部分列举下：
张培跃
四、Vue SPA 应用中设置title与meta
在 Vue SPA 应用中，如果想要修改HTML的头部标签，或许，你会在代码里，直接这么做:
new Vue({
router,
data:{
title:"张培跃",
keywords:"玉树临风,风流倜傥,英俊潇洒,才高八斗,貌似番安",
description:"这么神奇吗？都已经很难用言语来描述了"
},
beforeMount(){
console.log(1212)
document.title = this.title;
const keywordsEl = document.createElement('meta')
keywordsEl.content = this.keywords;
keywordsEl.name = "keywords"
const descriptionEl = document.createElement('meta')
descriptionEl.content = this.description;
descriptionEl.name = "description"
document.head.appendChild(keywordsEl)
document.head.appendChild(descriptionEl)
},
render: function (h) { return h(App) }
}).$mount('#app')
但是这样的代码，是不是感觉怪怪的！怎么看也不够优雅！没关系，咱们继续往下看！
五、优雅设置title与meta
可以通过引入vue-meta模块，实现以优雅的方式设置title与meta。
1、安装
npm install vue-meta -S
2、在main.js中引入
import Meta from 'vue-meta';
Vue.use(Meta);
3、使用
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
1、在router.js中创建路由：
routes: [
{
path: "/qq",
name: "Qq",
component: Qq,
meta: {
metaInfo: {
title: "腾讯首页",
keywords: "资讯,新闻,财经,房产,视频,NBA,科技,腾讯网,腾讯,QQ,Tencent",
description: "腾讯网从2003年创立至今，已经成为集新闻信息……"
}
}
},
{
path: "/jd",
name: "Jd",
component: Jd,
meta: {
metaInfo: {
title: "京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！",
keywords: "网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东",
description: "京东JD.COM-专业的综合网上购物商城，……"
}
}
}
]
2、在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,
})
3、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)
store.commit("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')
自此功能完美完成，希望对小伙伴们能够有所帮助。
—————END—————
喜欢本文的朋友们，欢迎关注公众号 张培跃，收看更多精彩内容！！！公众号回复 电子书 ，送你经典电子书籍！
