a标签 vue 动态点击_vue归纳笔记：vuex结合vuemeta实现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优化部分列举下：

<title>张培跃title><meta name="keywords" content="玉树临风,风流倜傥,英俊潇洒,才高八斗,貌似番安"><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')

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

—————END—————

喜欢本文的朋友们，欢迎长按下图关注公众号 

张培跃，收看更多精彩内容