标签：code 关于 会展 解决 路由 渲染 新网 nav view设置
问题描述：每次强制刷新登陆页面时，总是会出现主页一闪而过的现象，如果主页上有请求，还会请求后台数据。感觉不太正常，所以想到研究下为什么，然后去掉这个主页一闪而过的现象
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>
这样问题就解决了。当然不知道是不是最好的方式，有更好的方式，希望大家不吝赐教。
标签：code 关于 会展 解决 路由 渲染 新网 nav view设置
原文地址：https://www.cnblogs.com/goloving/p/9195427.html
