vue 接入阿里云人机验证，当改变 router 时验证组件无法渲染，需刷新才能渲染

Question

登录注册时 需要做人机验证 接入的是阿里云的人机验证，验证逻辑什么的都是正常的

问题是每次进入登录或者注册页面时，需要刷新一下，人机验证的组件才能渲染出来，用了 this.$forceUpdate()也不起作用

但是不管用,以下是代码

上图是刷新后的界面，不刷新人机验证出不来

Answer 1

走过路过的大神都来瞧瞧咧，帮忙看看这个问题该如何解决。

Answer 2

可以写个自定义组件异步加载阿里cdn的js,如下:

components: {
  "remote-js": {
    render(createElement) {
      const self = this;
      return createElement("script", {
        attrs: { type: "text/javascript", src: this.src },
        on: {
          load() {
            self.$emit("loaded");
          }
        }
      });
    },
    props: {
      src: { type: String, required: true }
    }
  }
}

<remote-js src="//g.alicdn.com/sd/nvc/1.1.112/guide.js" @loaded="initCaptcha"></remote-js>

created() {
  window.NVC_Opt = {
    appkey: "********************",
    scene: "******",
    renderTo: "#captcha",
    //.....
  }
}

methods:{
  initCaptcha() {
    const ic = new smartCaptcha({
      renderTo: "#sc",
      width: 300,
      height: 42,
      default_txt: "点击按钮智能验证",
      success_txt: "验证成功",
      fail_txt: "验证失败，请在此点击按钮刷新",
      scaning_txt: "智能检测中",
      success(data) {
        //...
      }
    });
  }
}