vue项目切换页面白屏的解决方案

简介: vue项目切换页面白屏的解决方案

问题描述


1、页面切换后白屏,同时切换回上一个页面同样白屏


2、刷新后正常显示


3、有警告:Component inside <Transition> renders non-element root node that cannot be animated


解决方法


<Transition>中的组件呈现不能动画化的非元素根节点


也就是说,组件内必须有一个根元素


之前:


<template>
  <div>你好</div>
  <div>您好</div>
</template>


现在:


<template>
  <div>
    <div>你好</div>
    <div>您好</div>
  </div>
</template>


原来的vue2中,template下是必须有一个根元素的,vue3变为可多个根元素


相关文章
|
3天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
10 0
|
3天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
2天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
9 1
|
3天前
|
JavaScript
vue知识点
vue知识点
11 0
|
JavaScript 数据安全/隐私保护
work02_vue页面打印水印
work02_vue页面打印水印
278 0
work02_vue页面打印水印
|
3天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
3天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
8 0
|
3天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
|
3天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
3天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
6 0