继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

vuex结合vue-meta实现router动态设置meta标签

张培跃
关注TA
已关注
手记 23
粉丝 30
获赞 98

网站的访问流量中,有相当一部分都是来自于搜索引擎,而来自于搜索引擎的流量又全部是免费的,所以网站的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优化部分列举下:

<!-- 页面标题<title>标签(head 头部必须) -->
<title>张培跃</title>
<!-- 页面关键词 keywords -->
<meta name="keywords" content="玉树临风,风流倜傥,英俊潇洒,才高八斗,貌似番安">
<!-- 页面描述内容 description -->
<meta name="description" content="这么神奇吗?都已经很难用言语来描述了,欢迎关注我的公众号【张培跃】">

四、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')

自此功能完美完成,希望对小伙伴们能够有所帮助。

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP