解决vue页面刷新产生白屏

本文介绍了一种在Vue中实现路由页面重载的方法,通过在App.vue中控制router-view的显示状态,配合$nextTick实现页面刷新效果。适用于需要强制刷新页面数据场景。

app.vue

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>


<script>
export default {
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

将要引用的页面 例如:home.vue

*注入*
inject: ['reload'],
*调用*
this.reload()
### Vue3 动态路由页面刷新白屏解决方案 在 Vue3 项目中,动态路由可能会因为页面刷新而导致白屏问题。以下是针对该问题的详细分析与解决方案。 #### 1. 原因分析 当用户访问某个带有动态路由的页面时,如果未提前加载对应的路由信息,则可能导致 `router` 配置不全,在刷新页面时无法找到对应路径从而引发白屏现象[^1]。此外,Vue Router 的初始化逻辑也会影响最终效果,因此需要特别关注路由注册时机以及缓存机制。 --- #### 2. 解决方案一:预加载动态路由并存储于本地缓存 为了防止刷新导致丢失数据的情况发生,可以在应用启动阶段预先拉取后台返回的所有可用菜单及其关联的前端组件地址,并将其保存下来以便后续重复利用: - **实现步骤** - 在入口文件(如 main.ts 或 app.vue)处调用服务端 API 接口获取完整的权限列表; - 将这些数据序列化成字符串形式并通过 sessionStorage/localStorage 存储起来; - 创建一个新的函数用于解析已有的静态+动态组合后的完整 route tree 结构体; ```typescript // permissionHelper.ts import { RouteRecordRaw } from 'vue-router'; function loadDynamicRoutes(): Array<RouteRecordRaw> { const cachedMenusStr = window.sessionStorage.getItem('dynamic-routes'); if(cachedMenusStr){ return JSON.parse(cachedMenusStr); } throw Error("No dynamic routes found!"); } export default loadDynamicRoutes; ``` 随后修改原有 router/index.ts 文件如下所示: ```typescript const loadedRoutes = loadDynamicRoutes(); const constantRoutes: RouteRecordRaw[] = [ //...your static routes here... ]; let allRoutes = [...constantRoutes,...loadedRoutes]; const router = createRouter({ history:createWebHistory(), routes:allRoutes, }); ``` 这样即使浏览器重新载入网页也不会再次触发网络请求过程而是直接采用之前保留下来的副本继续渲染视图层结构. --- #### 3. 方案二:基于 addRoute 方法实时更新路由表 另一种更灵活的方式则是借助 vue-router 提供的 api 来完成按需懒加载式的功能扩展操作——每当检测到新的子模块被激活之后再即时追加相应的节点进去即可满足需求. 具体做法可以参照下面这段伪代码片段演示如何结合 vuex 状态管理工具来达成目标 : ```javascript // store/modules/auth.js async function fetchUserPermissions({commit}){ const resp=await axios.get('/api/user/permissions'); commit('setPermissionList',resp.data.permissions); } actions:{ async initializeApp(context,payload){ await context.dispatch('fetchUserPermissions'); payload.next(); // allow navigation to proceed after permissions are set. }, } mutations:{ setPermissionList(state,value){ state.permissionList=value.map(item=>convertToRouteObject(item)); applyNewlyAddedRoutes(state.permissionList); // helper func defined elsewhere. } } // utils/routeUtils.js function convertToRouteObject(permissionItem){ return {...}; } function applyNewlyAddedRoutes(newRoutesArray){ newRoutesArray.forEach(route=>{ router.addRoute(route.parentName||'',route); }); } ``` 以上策略允许我们在不影响整体性能表现的前提下逐步完善整个系统的导航体系架构设计[^2], 同样适用于大型复杂的企业级应用场景当中 . --- #### 4. 补充注意事项 无论采取哪种办法都需要注意以下几点事项 : - 确认首页本身属于固定不变的部分而非依赖外部条件决定的内容 ; - 如果存在通配符类型的兜底规则的话记得同样作为独立实体加入进来以免遗漏某些特殊情况下的处理流程 ; - 对异常情况进行妥善捕获反馈给终端使用者友好提示消息而不是简单粗暴地终止程序运行 ; 最后提醒大家务必测试清楚各种边界情况才能放心上线部署哦 ! ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值