• vue 全局配置seo(title,关键词,描述)


    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);
                })
            }
        },
    })
  • 相关阅读:
    2019春季学期第四周作业
    2019年春季学期第三周作业+预习作业
    2019第一周作业2
    2019第一周作业1
    寒假作业3(抓老鼠啊~亏了还是赚了?)
    nginx负载均衡
    性能优化建议
    数据库主从配置
    php魔术方法
    图片轮播
  • 原文地址:https://www.cnblogs.com/duanzhenzhen/p/11043645.html
Copyright © 2020-2023  润新知