Vue使用百度分享,组件切换、销毁分享失效的解决办法

销毁分享组件,再重新建立分享组件,发现分享按钮不见了
查了一些资料 什么 重设config啥的 都不行
后来发现了init方法
顾名思义 重新初始化一下就行了 也不要重新去添加标签

使用百度分享的init方法

/* eslint-disable */
export default {
  mounted() {
  // 关键代码在这里  如果已经加载了 就init它  没有加载 就初始化
    window._bd_share_main ? window._bd_share_main.init() : this.initShare()
  },
  methods: {
    initShare() {
      window._bd_share_config = {
        // 你的配置项
      };
      
      // 如果有意外 为了避免冲突 先干掉以前的分享script
      const $el = document.querySelector('#baiduShare')
      $el && document.body.removeChild($el)
      
      const s = document.createElement('script');
      s.type = 'text/javascript';
      s.id = 'baiduShare'
      s.src = '你的分享链接'
      document.body.appendChild(s);
    }
  }
}

你可能感兴趣的:(vuejs,前端)