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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM