VUE项目的遮罩层问题

最近在写项目时增加按钮功能，出于想抽象出来封装的想法让我产生的一点纠结。

目前想到的两种解决方案

1. 写一个单独的添加数据组件公用
   使用Vuex将原页面中需要添加的选项传递到公用的添加数据组件中
   组件内添加选项的数量和内容通过Vuex中的数据动态生成。
2. 给每个组件写上单独的添加页面
   可用数据控制vue-if或vue-show达到目的

因为第二种方案可能有大量重复代码，所以初步决定用第一种方案。
有了思路之后，本来准备开始着手写实现层，但是假象出实际效果之后发现有几个缺点

缺点

1. 因为是一个单独的路由，所以点击添加按钮之后均跳转至了一个新的页面，尽管可以通过Vuex展示一些提示信息，难免用户有事要离开电脑前，如果过了一段时间突然回来之后，可能会遗忘要添加的内容或者忘记这个内容要添加到哪去，当用户不确定的时候，可能会取消添加要返回至原页面。
2. 因为页面是进入是先发送一遍Ajax请求，所以当用户取消添加时，我认为会浪费一次请求。

目前还没想到更好的方案，暂时决定使用第一种方案

v-if与v-show的区别：
v-if依赖于控制DOM节点。————操作DOM
v-show是依赖于控制DOM节点的display属性。————操作CSS

结合网络中其他大佬总结的综合一下：
v-if：首先，他是Vue的条件语句，根据表现效果可以用来做标签的显示和隐藏。他会操作DOM——如果true渲染节点，如果false销毁节点，这使得v-if特别消耗浏览器性能，但是如果用户不使用这个节点，那么就是省了一个节点的渲染。

v-show：相比v-if可能更“专业”点，根据条件来展示或隐藏标签。show会操作元素的display属性，为true时，对应DOM元素的display的值为block，为false时，display的值为none。