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

Posted 2020-11-19 goloving

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

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>

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