Vue Router场景下App.vue组件内容为何会在所有页面显示？

• App.vue是Vue项目的根级挂载组件，不属于任何路由匹配的页面组件层级。
• Vue Router的标准渲染逻辑为：App.vue作为全局外层容器，所有路由匹配到的页面组件，都会被渲染到App.vue内部的<router-view>标签占位位置。
• 直接写在App.vue模板中的内容，属于全局外层容器的组成部分，路由切换时这个外层容器不会被销毁替换，因此编写的内容会出现在所有路由对应的页面中。

• 该现象是框架设计层面的正常机制，并非路由配置错误导致的异常，全局通用的导航栏、侧边栏、页脚等跨页面复用的内容，本身就是推荐放置在App.vue中的。
• 如果某段内容仅需要在特定页面展示，出现这个问题的本质是代码放置位置错误：需要将对应内容移动到路由配置绑定的专属页面组件的模板中。若必须在App.vue内渲染这段内容，可以结合路由对象$route做条件判断，仅匹配到指定路由时再渲染对应内容。

内容的提问来源于stack exchange，提问作者user15258189