记录vue设置动态网页seo

入口文件main.js配置
 

data: {

    'keywords': '',

    'description': '',

    'title': ''

  },

  created() {

    let head = document.getElementsByTagName('head'); //创建head标签

    let meta1 = document.createElement('meta'); // 创建meta标签

    let meta2 = document.createElement('meta');

 

    meta1.name = 'keywords'; // 设置name

    meta2.name = 'description';

 

    function getSEO(index, h, m1, m2) {

 

      axios.get('/getSeo', { 'params': { 'id': index } }).then((response) => {

        var data = response.data.data;

 

        let key = data.keyword;

        let desc = data.description;

        let title = data.pageTitle;

        document.title = title || '默认title';

        m1.content = key || '默认关键字';

        m2.content = desc || '默认描述';

        h[0].appendChild(m1);

        h[0].appendChild(m2);

 

      }).catch((err) => {

        console.log(err);

      });

    }

 

    let cIndex = sessionStorage.currentRouteIndex; // 先保存一把

    if (cIndex) {

      cIndex = parseInt(cIndex, 10);

      getSEO(cIndex, head, meta1, meta2);

    } else {

      getSEO(1, head, meta1, meta2);

      sessionStorage.currentRouteIndex = 1; // 首次 进入

    }

    // 全局配置

    router.beforeEach((to, from, next) => {

      let i = to.meta.index;

      let j = from.meta.index;

      if (i === j) {

        return;

      } // 减少请求次数

 

      if (meta1.name === 'keywords' || meta2.name === 'description') { // 如果之前有获取过关键字，先清空内容

        meta1.content = '';

        meta2.content = '';

      }

      sessionStorage.setItem('currentRouteIndex', i); // 保存到浏览器中去

      getSEO(i, head, meta1, meta2);

      next();

    });

 

 

路由配置

 

{

            path: '/chanpin',

            name: 'chanpin',

            component: chanpin,

            'meta': {

                'index': 2, // 自定义标识

                'keepAlive': true

            }

},

主要添加meta,自定义index标识，去后台查询

'meta': {

                'index': 2, // 自定义标识

                'keepAlive': true

 }