关于vue单页面应用总是先出现主页一闪而过的现象
2018-06-18 16:14
936 查看
问题描述:每次强制刷新登陆页面时,总是会出现主页一闪而过的现象,如果主页上有请求,还会请求后台数据。感觉不太正常,所以想到研究下为什么,然后去掉这个主页一闪而过的现象
1、先看下我之前的app的router-view设置
也就是说:当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就行了。所以我再加个条件:
这样问题就解决了。当然不知道是不是最好的方式,有更好的方式,希望大家不吝赐教。
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>
这样问题就解决了。当然不知道是不是最好的方式,有更好的方式,希望大家不吝赐教。
相关文章推荐
- android之关于getview 多次调用出现的错位现象
- 关于在linux控制台按下ctrl+s后出现卡住现象的问题
- 关于使用cmd编译java文件出现乱码现象解决方法
- 关于Google浏览器添加QQ电脑管家广告过滤插件出现2345主页拦截问题
- 关于vs.net中读取文件出现乱码的现象
- 关于vs2010 C++编译链接总是出现“LNK:2019 无法解析的外部符号”的问题
- Apache的ANT Project的主页访问的时候总是出现问题,还是把它的镜像站点记下来的好!
- 关于用VS运行emwin时出现一堆错误的现象之一
- 关于Unity3D动画播放时出现“抽搐”现象的解决方法
- 关于在vs2005中出现: error LNK2001: 无法解析的外部符号 __security_cookie现象的处理办法
- tomcat配置的项目总是出现卡死的现象
- 关于wxPython中的TextCtrl响应失去焦点事件后不能再次编辑或出现不正常现象的解决办法
- Apache的ANT Project的主页访问的时候总是出现问题,还是把它的镜像站点记下来的好!
- 关于使用cmd编译java文件出现乱码现象解决方法
- 关于Vector删除末尾末尾元素时出现的怪现象
- 关于eclipse总是出现adb refused request的问题(转)
- Apache的ANT Project的主页访问的时候总是出现问题,还是把它的镜像站点记下来的好!
- 关于 qml程序在目标机上开发时运行出现不断闪屏现象的 解决方法
- Apache的ANT Project的主页访问的时候总是出现问题,还是把它的镜像站点记下来的好!
- 关于LinerrLayout问题,总是出现"LinearLayout" must be followed by the ' = ' character.