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

青旅半醒 2021-11-05 03:10 981阅读 0赞

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);
                })
            }
        },
    })