关于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 ...
随机推荐
- TCP 建立连接为什么要握 3 次手?
上次已经说过,没有协议,不成方圆,计算机之间的通信更是依赖于协议.今天就重点分析一下 TCP 协议. 传输控制协议 TCP 是一种面向连接的.可靠的.基于字节流的传输层通信协议,由IETF的RFC 7 ...
- [leetcode greedy]55. Jump Game
Given an array of non-negative integers, you are initially positioned at the first index of the arra ...
- BZOJ 1283 序列 费用流 网络流 线性规划
https://darkbzoj.cf/problem/1283 给出一个长度为N的正整数序列Ci,求一个子序列,使得原序列中任意长度为M的子串中被选出的元素不超过K(K,M<=100) 个,并 ...
- 【HDU】2866:Special Prime【数论】
Special Prime Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tot ...
- 恢复二进制文件中的block符号表
前篇博客中,使用 杨君的小黑屋 提供的工具恢复二进制文件的符号表,只恢复了函数的符号表,本篇讲述如何恢复block符号表,杨君的博客中使用IDA分析二进制文件,本篇则使用MacOS系统上体验也不错的H ...
- PHP自学之路---雇员管理系统(1)
前面已经介绍了Zend studio工具的使用以及软件开发的基本阶段,下面就是我们第一个练习,雇员管理系统,从设计到实现来简单介绍下: 开发环境: 服务器:基于Linux 2.618环境下配置PHP服 ...
- java基础学习总结——数组
一.数组的基本概念 数组可以看成是多个相同类型数据组合,对这些数据的统一管理. 数组变量属引用类型,数组也可以看成是对象,数组中的每个元素相当于该对象的成员变量. 数组的元素可以是任何数据类型,包括基 ...
- datagrid在MVC中的运用06-固定连续列
本文主要体验datagrid的frozenColumns属性. □ frozenColumns效果: 在frozenColumns的列将保持不动,而其他列横向滚动. □ frozenColumns效果 ...
- C语言内存分析
C语言内存分析 一.进制 概念:进制是一种计数方式,是数值的表现形式 4种主要的进制: ①. 十进制:0~9 ②. 二进制:0和1 ③. 八进制:0~7 ④. 十六进制:0~9+a b c d e f ...
- freecms怎样在信息列表类标签中提取info.content
原文地址:http://javaz.cn/site/javaz/site_study/info/2015/22026.html 项目地址:http://www.freeteam.cn/ 因为info. ...