使用子路由优化modal弹窗

一般后台管理系统中，列表+增删改查是最常见的页面。当操作新增、修改、查看详情操作时，往往使用modal弹窗来实现。下面举个例子，右侧是抽屉型的弹窗，不必在意

以前我实现这个功能，是在父组件里写一个modal子组件，然后父子组件通信来得知或处理modal的显隐，常见逻辑如下

1. 父组件里点击创建按钮，将visible值告诉子组件
2. 子组件接收visible值，显示出来
3. 子组件点击确定或取消，告诉父组件
4. 父组件接收到子组件通知，刷新列表

最基础的逻辑有4个，还要考虑到子组件重新初始化的问题，每次点击创建，都需要确保子组件内没有残留上次输入的值。具体的方法有修改子组件的key、调用子组件初始化方法等不一而足。

但是父组件根本没必要关心子组件的显隐，更不关心子组件是否有上次残留值。除了必要的参数传递（例如查看详情时的id），父子组件的逻辑完全由它自己处理。为了尽量减少父子组件的耦合程度，我用子路由来实现这个需求。既然子路由可以放入列表，自然可以放入modal，因此只要在父组件添加子路由，指向子组件即可。而子组件就是个visible为true的modal，即当路由指向此地址时，这个modal默认就是显示的，无需处理visible的逻辑了。逻辑如下：

举例：/list 路由对应父组件，父组件路由下的/create 对应子组件

1. 父组件里点击创建按钮，跳转到./create，即显示子组件
2. 子组件点击 取消/确定 按钮，重定向到/list。之所以使用重定向，是为了防止浏览器后退时又指向了/list/create 而显示modal子组件

这种方案父子组件之间没有通信，如果有必要的id传递，也可以使用路由参数来实现。还解决了子组件初始化的问题，可以保证每次子组件都是刚初始化的。

vue-router和react-router具体实现方式不一样，可以参看官网的示例。