zoukankan      html  css  js  c++  java
  • 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);
                })
            }
        },
    })
  • 相关阅读:
    c语言,浮点数转byte array
    go的select 只会执行一个case,就会退出select 块
    【转】pphp中goto的用法
    [转]php 中yield是个什么东西
    z-index 0 和auto的区别,这个例子好好琢磨一下
    SpringMVC框架下实现原生分页功能
    Jackson 高级应用
    Jackson 的 基本用法
    Jackson转换为Collection、Array
    spring处理数据库中Date类型字段转换成时间戳问题
  • 原文地址:https://www.cnblogs.com/duanzhenzhen/p/11043645.html
Copyright © 2011-2022 走看看