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

Question

我想在一个/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>

Answer 1

<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>