关于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>
这样问题就解决了。当然不知道是不是最好的方式,有更好的方式,希望大家不吝赐教。
关于vue单页面应用总是先出现主页一闪而过的现象的更多相关文章
- 处理 Vue 单页面应用 SEO 的另一种思路
vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...
- Vue单页面骨架屏实践
github 地址: VV-UI/VV-UI 演示地址: vv-ui 文档地址:skeleton 关于骨架屏介绍 骨架屏的作用主要是在网络请求较慢时,提供基础占位,当数据加载完成,恢复数据展示.这样给 ...
- vue单页面打包文件大?首次加载慢?按需加载?是你打开方式不对
部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...
- [one day one question] Vue单页面应用如何保证F5强刷不清空数据
问题描述: Vue单页面用按F5强刷,数据就恢复初始了,这怎么破? 解决方案: store.subscribe((mutation, state) => { sessionStorage.set ...
- [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新
目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...
- vue单页面处理SEO问题
设置vue 单页面meta info信息 vue-meta-info,(https://github.com/muwoo/vue-meta-info)如果需要单页面SEO,可以和 prerender- ...
- Vue单页面应用阻止浏览器记住密码
Vue单页面应用阻止浏览器记住密码 ——IT唐伯虎 摘要: Vue单页面应用阻止浏览器记住密码. 现象1:路由切换时再次提示“是否记住密码” 登录页面有个密码输入框,输入账号密码进行登录: 登录完成后 ...
- 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新
目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...
- fullpage在vue单页面当中使用会出现的问题以及解决办法
在 vue 单页面当中发现fullpage会报错,报错信息大概意思为,fullpage不允许初始化多次. 解决办法,在使用fullpage的组件跳转路由进入销毁组件之前的生命周期的时候对fullpag ...
随机推荐
- Microsoft Office Access
Microsoft Office Access各版本下载地址:http://www.accessoft.com/download.html 简介 access(微软发布的关联式数据库管理系统)一般指M ...
- URL的组成
饮水思源 http://blog.csdn.net/ergouge/article/details/8185219 http://www.cnblogs.com/kaituorensheng/p/37 ...
- 为了增强团队的协作和高效开发,提升代码质量,TGideas团队一起制订的代码规范。主要包括五部分内容:PC规范、移动端规范、性能优化、CP规范、其他项目规范
http://tguide.qq.com/main/index.htm
- luoguP5108 仰望半月的夜空 [官方?]题解 后缀数组 / 后缀树 / 后缀自动机 + 线段树 / st表 + 二分
仰望半月的夜空 题解 可以的话,支持一下原作吧... 这道题数据很弱..... 因此各种乱搞估计都是能过的.... 算法一 暴力长度然后判断判断,复杂度\(O(n^3)\) 期望得分15分 算法二 通 ...
- BZOJ 3956: Count 主席树 可持久化线段树 单调栈
https://www.lydsy.com/JudgeOnline/problem.php?id=3956 从描述可以得到性质: 每个好点对 ( 除了差值为1的好点对 ) 中间的数 ( i , j ) ...
- 让screen帮助你协同工作
Screen是系统管理员手中的一件利器,下面我把它介绍给你,相信你会和我一样,认可这个非常棒的软件 一,什么情况下会用到screen? 比如说,我们在运行一个非常费时间的程序,注意:可能我们是在通 ...
- hdoj 5199 Gunner map
Gunner Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5199 D ...
- C#高级编程9-第9章 字符串和正则表达式
字符串和正则表达式 String类 String类对象是不可改变的,对于String对象的重新赋值在本质上是重新创建了一个String对象并将新值赋予该对象,其方法ToString对性能的提高并非很显 ...
- SQLyog客户端无法连接MySQL服务器
环境:centos下使用yum 命令安装了mysql服务 1.进入linux 通过命令service mysqld start启动mysql的服务 2.使用sqlyog 连接mysql发现连接不上,如 ...
- 我们为什么需要Map-Reduce?
在讨论我们是否真的需要Map-Reduce这一分布式计算技术之前,我们先面对一个问题,这可以为我们讨论这个问题提供一个直观的背景. 问题 我们先从最直接和直观的方式出发,来尝试解决这个问题: 先伪一下 ...