zoukankan      html  css  js  c++  java
  • seo + vue-meta-info + vuex

    简单使用

    1.cmd安装vuex,vue-meta-info

    cnpm install vuex -save
    cnpm install vue-meta-info --save

    2.src下新建store文件夹,新增src/store/index.js文件

    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    const store = new Vuex.Store({
    state:{
    metaInfo:{
    title:"西安机床工具展览会",
    keywords:"机床,展览会,西安,高端机床制造商",
    description:"XIMS2021中国(西安)机床工具展览会以“精准、智造、融合、创新”为主题,为观众呈现代表行业发展的前沿技术和最新发展成果,强调和突出“创新”;依托陕西省强大的制造业资源及科教资源优势,集品牌展示、技术交流、贸易合作、宣传推广、国际研讨于一体,为行业上下游用户搭建便捷、高效的交流平台,实现机床企业与用户的融合、主机厂商与部件厂商的融合、产学研用的融合及协同创新,是推动机床工具转型升级的一站式会展平台。"
    }
    },
    mutations:{
    setMetas(state,data){
    state.metaInfo=data;
    }
    }
    })
    export default store;

    3.main.js引入

    
    
    // 引入vue-meta-info
    import MetaInfo from 'vue-meta-info'
    Vue.use(MetaInfo)

    /*
    eslint-disable no-new 引入vuex */ new Vue({ el: '#app', store, router, render: h => h(App) })

    4.App.vue

    <template>
      <div id="app">
        <component :is="layout">
          <router-view v-if="isRouterAlive"/>
        </component>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
      //seo优化keyword title description
      metaInfo() {
        return {
          meta: this.metaData,
          title: this.titles,
        };
      },
      provide(){
        return {
          reload: this.reload
        }
      },
      data(){
        return {
          default_layout: 'default',//设置layout
          isRouterAlive: true,
          metaData: [
            {
              name: "keywords",
              content: this.$store.state.metaInfo.keywords,
            },
            {
              name: "description",
              content: this.$store.state.metaInfo.description,
            },
          ],
          titles: this.$store.state.metaInfo.title,
        }
      },
      computed:{
        layout(){
          return (this.$route.meta.layout || this.default_layout) + '-layout'
        }
      },
      watch: {
        $route(to, from) {
          setTimeout(() => {
            this.metaData = [
              {
                name: "keywords",
                content: this.$store.state.metaInfo.keywords,
              },
              {
                name: "description",
                content: this.$store.state.metaInfo.description,
              },
            ];
            this.titles = this.$store.state.metaInfo.title + "-西安机床展览会";
          }, 500);
        },
      },
      methods: {
        //通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载
        reload(){
          this.isRouterAlive = false;
          this.$nextTick(function () {
            this.isRouterAlive = true;
          })
        }
      }
    }
    </script>
    
    <style>
    
    </style>

    5.页面中使用

    //  获取新闻详情
            getNewsDetail(){
              let _this = this;
              this.$http.getPage("/cms/id", {id:this.id}).then((res) => {
                if(res.code == 1){
                  this.newsInfo = res.data;
                  document.title = res.data.title;
                  let metaInfo={
                    title:_this.newsInfo.title,
                    keywords:_this.newsInfo.tags,
                    description:_this.newsInfo.description,
                  }
                  this.$store.commit("setMetas",metaInfo);
                }
              });
            },
  • 相关阅读:
    Linux实战(2):Linux传输文件
    Linux实战(1):装机一键设置脚本初级版
    Docker实战(4):Docker错误记一笔
    Docker实战(3):Tomcat部署
    Docker实战(5)升级Docker版本后的报错
    Promise
    创建数据库
    wepy中组件之间通信方法
    javascript —— 禁止通过 Enter 键提交表单
    input禁止复制、粘贴、剪切
  • 原文地址:https://www.cnblogs.com/duanzhenzhen/p/11424840.html
Copyright © 2011-2022 走看看