div层级标签对于组件显示和隐藏的影响

给大家避避坑，我花了几天的时间才发现这个问题（可能是我太蠢了）

要实现的效果：

点击链接，黄色块隐藏，绿色块显示

注意：router-view 在哪，页面就从哪里开始渲染

本案例，router-view是在h2标签后，所以在h2标签后开始渲染

接下来继续回到我们的案例，我们需要实现一个组件隐藏和显示(使用 v-if)

并使用watch监视路由的变化，如果发现路由跳转，则改变v-if的值

下面附上代码：

 

 

可得到的结果却是

 你没看错，得到的是一片空白

 可是，逻辑也没毛病啊？到底是为什么？

你还记得一开始的效果图吗？绿色块是被包含在黄色块中，所以当我们隐藏黄色块时，会将绿色块一起隐藏

 

让我们修改代码：

将原来的黄色块用一对div标签包裹

然后需要渲染出来的绿色标签用一对div标签包裹 

可能有人会说，这不是一眼就能看出来嘛

可是当你div标签里嵌套着div标签，层层嵌套，你就看不出来你写的东西在哪个div标签里了，如果div标签嵌套较多，尽量写好它们的层次结构，并且必要时，可以将它们折叠起来，就能清晰地看出网页的大结构了 

第一次写文章，以后会越写越好的！