vue3实现禁用物理按键返回，但是可以通过自定义app-bar的返回按钮返回

1.注意app-bar是一个所有页面都会用到的顶部title栏，里面左侧有返回按钮；

2.基于1，在app-bar组件的setup里添加这个代码：

onMounted(() => {
      // 不能少
      history.pushState(null, null, document.URL);
      window.addEventListener('popstate', disableBrowserBack);
    });

    onUnmounted(() => {
      window.removeEventListener("popstate", disableBrowserBack, false);
    });

    function disableBrowserBack() {
      history.pushState(null, null, document.URL);
    }

    // 自定义back按钮触发
    function back() {
      if (props.isCustomBack) {
        context.emit('close');
      } else {
        // 移除disableBrowserBack这个监听器【因为每个页面的app-bar都是不同的实例都会onMounted一次，所以这里移除也没事】
        // 貌似go(-2)的话这个代码可以不要？
        window.removeEventListener("popstate", disableBrowserBack, false);
        // 这里要返回两层（可能是history.pushState(null, null, document.URL);会算一层？）
        router.go(-2);
      }
    }

如果有问题可以考虑将onMounted里的代码直接放setup下【应该不是这个问题】

这边经过测试，发现有时候子组件app-bar的setup在加载了包含它的父组件后不会立刻执行，所以导致仍然能够点返回键返回，

而如果鼠标点击一下app-bar的任意位置则能够触发app-bar的setup执行，然后禁用物理键返回的能够生效，不知道是不是vue的bug

，所以可以考虑vue3里用vue2的created/mounted函数来执行上面的方法；（可以用XBack.ts来实现）

如果还不行，干脆让父组件直接内部调用子组件的方法（但是这个就要求每个父组件都要写一段代码，要是组件也有继承就好了）；

【也可能是因为自己用了异步加载导致没有立刻执行？】

这里再试了下通过ref字段到页面上，这样按理会立刻显示，然后在setup里执行对该ref字段的值修改，这种按理总会立刻触发才对；