问题

在 Bootstrap 5.1 中，如果使用 fade 渐进动画的 Modal 后，如：

<div class="modal fade">
	...
</div>

在发生 Vue 页面跳转时，窗口虽然消失，但遮罩仍然会存在，导致新的路由页面你无法使用，如下图所示：

原因

由于 Vue 是单页面应用，在发生 Vue-Router 路由跳转时，并不是发生真正的页面跳转。

因此 Boostrap 的遮罩 DOM 仍然会保留在 body 当中，即：

解决

知道问题的原因解决也非常简单，只需要在新路由组件的 Vue 的 created 的生命周期方法中，将这两个 DOM 移除即可。

参考代码：

created() {  
	let body = document.getElementsByTagName("body")[0]  
	let deleted = []  

	for (let i = 0; i < body.children.length; i++) {  
	  let child = body.children[i]  
	  if (child.className.startsWith('modal-backdrop')) {  
		deleted.push(child)  
	  }  
	}  
	deleted.forEach(e => body.removeChild(e));
}