亲们好！跟我说说你们遇见过这样的事没？换网址的时候，网页总是会晃一晃。这可真是烦死了！那为啥会这样？别急别急，咱就来分析看看！
猜一下，是不是都听过Vue-Router这个神器？这可是Vue的一大杀器，让开发省力不少。尤其是那套基于组件的router配置和各种route参数，太好用了！用好了route管理，会感觉轻松多了。比如route拦截啊、加载懒惰route啊、权限控制等，都很关键。
唉换路没有动画太无聊，翻页还那么难看。要是想提高一下体验感，得加些过渡效果。可是，为啥换路由时候页面老是乱晃悠？真搞不懂！
.fade-enter, .fade-leave-to{ visibility: hidden; opacity: 0; } .fade-enter-active, .fade-leave-active{ transition: opacity .2s ease; } .fade-enter-to, .fade-leave{ visibility: visible; opacity: 1; }
我们排除代码问题后，觉得可能是布局出了岔子。于是用谷歌浏览器里的调试器，变着法地看布局，终于找到点线索。
在我们看HTML的时候，是不是觉得每一次页面跳转都有两段代码跑来跑去？一段是进页面的，另一段却是想出来的。你可能会问了，这样屏幕小范围摆动有没有关系？别急，下边还有解释！
咱们就设成30秒，这样换页速度变快，前一画面还会停留在原地遮住新画面的一部分。快切换时，画面就有些晃悠咯~
看样子是出了点小毛病！别着急，咱们可以试试这个简单的法子：在那个不想让它露面的路由器上加个display: none属性，保准一秒钟搞定，剩下的页面空间也顺势就多出来啦（这效率可是杠杠滴）。当然咯，还能通过定位把它从文档流里弄走，只不过这个你可能得担心坐标的事儿，比较烦人，对我来说，我更喜欢这种直截了当的方法哦～
今天我们来聊聊怎么解决Vue切换路由时，页面乱晃的问题。希望我说的对你有用！如果你们有什么妙招，欢迎在评论区告诉咱们！其实有些小问题挺好玩的，比如为什么Vue-Router换页的时候会乱晃。经过我们讨论和研究，终于找到了解决方法，也算是弄明白了。觉得有帮助的朋友记得点个赞分享出去！在评论区说出你们的看法和建议也是完全欢迎的感激不尽你们花时间来看这个，感谢大家的支持！
.fade-enter{
visibility: hidden;
opacity: 0;
}
.fade-leave-to{
display: none;
}
.fade-enter-active,
.fade-leave-active{
transition: opacity .2s ease;
}
.fade-enter-to,
.fade-leave{
visibility: visible;
opacity: 1;
}
评论0