vue 全局配置seo(title，关键词，描述）

准备：

1.安装    npm install vue-meta-info --save

2.引入  main.js中

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

 

 

情况一：后台人员提供了需要优化的页面的动态“描述、关键词”接口

1.router文件夹下index.js中设置title

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: { title: '首页' }
    },
    {
      path: '/design',
      name: 'design',
      component: design,
      meta: { title: '网站设计' }
    },
    {
      path: '/shopping',
      name: 'shopping',
      component: shopping,
      meta: { title: '商城系统' }
    }
  ]
})

2.main.js中调用seo接口，并设置每个页面的title,关键词，描述

new Vue({
      el: '#app',
      render: h => h(App),
      router,
      components: { App },
      template: '<App/>',
    data: {
        keywords: "",
        description: "",
        title: "",
        viewId: 1
    },
    created() {
          this.getSEO();
          // 全局配置
        router.beforeEach((to, from, next) => {
            // Change doc title
            if(to.meta.title == '拓美科技'){
                this.viewId = 1;
            }else if(to.meta.title == '商城系统'){
                this.viewId = 2;
            }
            console.log(this.viewId);
            this.getSEO(this.viewId);
            next();
        })
    },
    methods: {
        //获取seo
        getSEO(viewId) {
            this.$axios.post("/get_seo",{
                "view_id": this.viewId
            }).then((response) => {
                let res = response.data;
                console.log(res.data);
                if(res.status == 1){
                    this.keywords = res.data.key_words;
                    this.description = res.data.description;
                    this.title = res.data.title;
                    document.title = this.title || '拓美科技';
        //            document.title = to.meta.title || '拓美科技'
                    document.querySelector('meta[name="Keywords"]').setAttribute('content', this.keywords)
                    document.querySelector('meta[name="Description"]').setAttribute('content', this.description)
                }else{
                    this.$layer.msg(res.message);
                }
            }).catch((err) =>{
                console.log(err);
            })
        }
    },
})

 

情况二：无接口

在需要使用的组件中：

export default {
  name: "live",
  metaInfo(){
    return {
      meta: [{
        name: 'keyWords',
        content: this.list1  //变量或字符串
      }, {
        name: 'description',
        content: this.list2
      }]
    }
  },
}