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

一. 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: "腾讯网从2003年创立至今，已经成为集新闻信息……"
    		}
    	}
    },
    {
    	path: "/jd",
            name: "Jd",
            component: Jd,
            meta: {
                metaInfo: {
                    title: "京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！",
                    keywords: "网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东",
                    description: "京东JD.COM-专业的综合网上购物商城，……"
                }
            }
    
    
    }
    ]
    

    　　

  • • 在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)
                  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')