关于vue路由跳转无法销毁样式的问题

Question

问题起沿

登录页我对body 进行 设计背景色，然后登录 成功后跳转到  主页。但是背景色还是存在。

我的想法是跳后面应该主动去销毁相应的dom与样式才对。

在vue 里并没有做。

虽然网络上有朋友说，在style 那边加scoped  域样式的控制。  但这样子还是没有办法对body html 进行样式应用，

我试了加上这样限制，vue 对路由的跳转后，还是没有进行这个组件的样式销毁。

试想如果我很多组件切来切去的话不是有很多样式在页面上。

不知道大家有没有对这个，vue 路由跳转后相关的组件样式dom 都进行销毁的好方法?

Answer 1

你这个方式是错的，因为vue挂载dom，是挂载到#app上。
正确的做法应该是，给定一个div设置背景元素，这个div撑满body即可。这样就可以做到每个页面有不同的背景色。

Answer 2

MVVM设计需要你将变动通过数据驱动dom
一般new Vue的时候，不会直接bind到body标签上，正是因为会有题主的情况出现。
如果你有很多大组件需要切换，你需要在body中添加container，Vue实例绑定到container中，container中再包含大组件，通过数据去驱动大组件的background-color

Answer 3

直接DOM操作，document.getElementsByTagName("body")[0].style.background=""，单页应用基本都是靠层级遮罩来实现