javascript - vue problem of dynamically changing WeChat sharing copy

Question

Now it’s like this. There is a requirement. When I share on the home page, the title is aaaa. When I share on the details page, the title is bbb. But the copy is fixed as soon as the page is loaded. How do I dynamically change the shared copy? I use It is vue2. The code is as follows

I wrote it in main.js and loaded it as soon as it was executed.
I defined var title = 'aaaa' desc = 'bbbb'
at the beginning when the route jumps to the details page. title change

router.beforeEach(function (to, from, next) {
  if (to.path.indexOf('/details') != -1) { // 当跳转到这个页面时候改变title
    title = 'cccc';
    desc = 'dddd'
  } else {
    title = 'aaaa';
    desc = 'bbbb';
  }
}

But this doesn’t work. I don’t know why the title will always be aaa from the beginning of loading. Unless I refresh the details page, the new instance of vue will be re-created and the title will be changed.

Share the code as follows:

  wx.onMenuShareAppMessage({ // 分享给朋友
    title: title, //   我需要动态改这个标题
    desc: desc,   //   动态改这个描述
    link: '',     // 分享链接 默认以当前链接
    imgUrl: imgUrl + '/static/images/share.png',// 分享图标
    // 用户确认分享后执行的回调函数
    success: function () {
              
        });
      }
    },

Answer 1

The initialization of your WeChat sharing function should be done globally. I think we can encapsulate wx sharing into a function, and then expose the parameters that need to be modified as an interface, your title here. Then complete registration and configuration in different routes (components).

Answer 2

        setPageTitle:function(video){
            document.querySelector('head title').innerText =  video.title;
            // hack微信等webview中无法修改标题
            var iframe = document.createElement('iframe');
            iframe.addEventListener('load', function () {
                setTimeout(function(){document.body.removeChild(iframe)},0) ;
            });
            document.body.appendChild(iframe);
            // 标题（内容)
            document.querySelector('.video_title').innerText = video.title;
        },

Answer 3

Recommend a component to modify the title