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

落日映苍穹つ 2023-06-06 08:19 6阅读 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);
                })
            }
        },
    })