vue单页面应应用，跳转同时关闭标签页

Question

vue单页面应应用，如何做到跳转同时关闭标签页？
比如在页面保存成功，需要跳到其他页面，如何跳转的时候关闭当前页？

Answer 1

在Vue单页面应用里头，想要实现保存成功后跳转到其他页面的同时关闭当前页，这个需求有点特别，因为单页面应用本质上是不刷新页面的，所以直接关闭当前页这个操作在SPA里面不是那么直观。不过，如果你是在浏览器的多标签页环境中工作，可以通过JavaScript来控制关闭当前标签页，然后再通过Vue Router来进行页面跳转。

但是，这里有个前提，就是用户必须自己打开了一个新的标签页，这样你才能用JavaScript去关闭它。如果是单页面应用内部的导航，那就没办法直接关闭“页面”了，因为所有的页面都是在一个标签页内动态加载的。

具体来说，你可以这样做：

首先，在你的保存成功的回调函数里，先调用Vue Router的this.$router.push({ path: '你要跳转的路径' })方法，把用户带到新的页面。

然后，如果你想真的关闭当前的标签页，可以使用window.close()方法。但是需要注意，这个方法只有在窗口是由脚本打开的情况下才会有效，比如说通过window.open()打开的。如果不是这种情况，调用window.close()可能不会有任何效果，或者会被浏览器阻止，因为它可能会被认为是恶意行为。

如果你的应用场景允许，你可以考虑在保存成功后提示用户手动关闭当前标签页，或者设计成用户点击某个按钮后先跳转，再由用户自己决定是否关闭。

举个简单的例子：

methods: {
  saveAndRedirect() {
    // 假设这是保存的逻辑
    this.$axios.post('/save', this.form).then(response => {
      if (response.data.success) {
        // 保存成功，先跳转到新页面
        this.$router.push({ path: '/newPage' });

        // 如果当前页面是新开的标签页，可以尝试关闭
        window.close();

        // 或者提示用户手动关闭
        alert('已保存，您可以关闭当前标签页');
      } else {
        // 处理保存失败的情况
        console.error('保存失败');
      }
    }).catch(error => {
      console.error('请求出错', error);
    });
  }
}

这只是一个思路，实际操作中可能需要根据你的具体应用场景做一些调整。