ElementUI: el-button可不可以实现点击后打开子路由，再次点击后关闭子路由？

我想在一个/user的页面中，如果点击一个添加按钮，路由就会跳转到它的子路由/user/add, 再次点击该按钮，路由就会跳回到/user, 实现类似于下拉框的操作，不知道可不可以。以下代码是实现单次跳转，如果可以的话该怎么修改代码。

<template>
<div>
  <el-button type="primary"  @click="add">添加</el-button>
  <router-view></router-view> 
</div>
</template>

<script>
export default {
    data() {
        return{
        }
    },
    methods: {
        add(){
            this.$router.push('/user/add')
        }
    }
}
</script>

<template>
<div>
  <el-button type="primary"  @click="add">添加</el-button>
  <router-view></router-view> 
</div>
</template>
 
<script>
export default {
    data() {
        return{
          flag: false
        }
    },
    methods: {
        add(){
           this.flag = !this.flag;
          if(this.flag) { this.$router.push('/user/add')} else { this.$router.push('/user')}
        }
    }
}
</script>

比较简单的方法是添加一个变量，如下：

<script>
export default {
  data() {
    return {
      toUserAdd: false, //是否跳转子路由/user/add
    };
  },
  methods: {
    add() {
      this.toUserAdd = !this.toUserAdd;
      if (this.toUserAdd) {
        this.$router.push("/user/add");
      } else {
        this.$router.push("/user");
      }
    },
  },
};
</script>