关于vue单页面应用总是先出现主页一闪而过的现象

  问题描述:每次强制刷新登陆页面时,总是会出现主页一闪而过的现象,如果主页上有请求,还会请求后台数据。感觉不太正常,所以想到研究下为什么,然后去掉这个主页一闪而过的现象

1、先看下我之前的app的router-view设置

<template>
<el-container :class="['app uf-col']">
<template v-if="$route.meta.fullScreen">
<router-view></router-view>
</template>
<template v-else-if="$route.meta.homePages">
<Nav></Nav>
<router-view></router-view>
</template>
<template>
<WHeader></WHeader>
<el-container>
<WMenu></WMenu>
<router-view></router-view>
</el-container>
</template>
</el-container>
</template>

  也就是说:当meta信息fullScreen为true时,我是让全屏展示的;homePages为true时,就会展示导航栏+router-view内容;然后else的时候呢,就展示登录之后的内容:头部+菜单+内容。

  问题其实就出现在这个else里面。

  我的根路由是设置了meta的homePages的,所以根路由进来是第二块展示;然后从根路由跳转登录等等都没有问题。但是出现问题的是:比如我localhost/#/login,这样刷新网页的时候,你就会发现主页一闪而过的现象。

  我在路由导航里一步步调试发现,当你这么刷新的时候,to:是"/login",from:是"/",也就是说路由导航认定你是从根路由去login路由,至于一闪而过的现场,难道是from路由就默认渲染了一次?

  但是我的根路由是设置了路由元信息homePages的,也不该走到else里面去啊?

  调试发现这种直接刷新localhost/#/login的情况,from路由虽然是"/",但是它却没有meta信息,meta属性是个空对象{},所以它就走入了else的展示,默认渲染了页面,然后再通过路由导航守卫拦截进入的登录页面。这应该就是问题的根源:那么我只需要让那个根路由不走进else就行了。所以我再加个条件:

<template>
<el-container :class="['app uf-col']">
<template v-if="$route.meta.fullScreen">
<router-view></router-view>
</template>
<template v-else-if="$route.meta.homePages">
<Nav></Nav>
<router-view></router-view>
</template>
<template v-else-if="$route.fullPath != '/'">
<WHeader></WHeader>
<el-container>
<WMenu></WMenu>
<router-view></router-view>
</el-container>
</template>
</el-container>
</template>

  这样问题就解决了。当然不知道是不是最好的方式,有更好的方式,希望大家不吝赐教。

上一篇:React-Native StyleSheet属性支持


下一篇:<转>DevExpress使用经验总结