前言
在我们制作网站不止一级路由时，可能会要在子路由里面单独设置一个滚动条。而不是由网页自带的滚动条进行滑动。不然可能会出现这种效果
网页自带滚动条滑动
如果用网页自带的浏览器的话就是整个页面向下滑动，如果用户想切换到另一个子路由模块的话，就得返回顶部才能操作。
总所周知，用户体验是最重要的，我们为了节省这一步。是不是可以在子路由里面给他加上一个滚动条而达到只有子路由里面内容滚动呢？？？？
怎样给子路由加上滚动条
overflow-x或overflow-y
给子路由加上一个id，然后给他加上样式
<!-- 二级路由 -->
<router-view id="secondRoute"/>
style：
#secondRoute:hover {
overflow-y: auto;
}
#secondRoute {
padding-right: 17px;
padding-left: 3px;
height: 70vh;
width: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
这里我设置的是当鼠标移入子路由滚动条才出现
！！！！！一定要把app里面的body加上overflow-y：hidden，不然将会和子路由的滚动条冲突。并且要给你的子路由加上height，不然不会显示！！！！！
下面是效果图
现在可以看到已经可以在子路由里面滑动了，可以更好的点击上面的导航栏啦！
但是！！！！！！
在图里我们发现，当滚动条出现时，旁边的布局明显被挤压到了
这是为什么？？？
后面我发现，原来滚轮条是需要占据空间的，当滚轮条出现，旁边的布局就会被挤压从而出现上面这种效果。
那么
我们该怎么解决呢？？？
overlay
经过上网搜索后，我发现overflow还有一种方法好像就是为了这个问题而生的。
overlay，但在我查询时，显示只有chrome支持，但是我使用后，发现在其他现代浏览器也是支持的（可能后面大家都进步了吧嘻嘻）
#secondRoute:hover {
overflow-y: overlay;
}
请看效果图
可以看到不会影响到旁边的布局啦
用户可以快乐使用啦
总结
路由样式是自己根据滚轮条样式慢慢调整的。
滚轮条样式修改我是参考这位大佬的，下面放他的博客地址
链接: https://blog.csdn.net/qq_36926807/article/details/80923140
