vue路由加载页面时，数据返回慢的问题

场景：

vue路由加载页面时，数据返回慢的时候页面会有闪动的效果，数据加载前和加载后的区别。（特别是el-table表格数据）

思路：

路由前加载数据，等数据加载完再路由渲染页面

解决方案：

使用vue-router的 路由守卫 beforeRouteEnter，组件内直接定义以下路由导航守卫，和钩子函数的写法一样，下面列出三种路由守卫：

    beforeRouteEnter(to,from,next)0{// 在渲染该组件的对应路由被 confirm 前调用// 不！能！获取组件实例 `this`// 因为当守卫执行前，组件实例还没被创建}
复制代码

    beforeRouteUpdate(to,from,next){// 在当前路由改变，但是该组件被复用时调用// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 `this`}
复制代码

    beforeRouteLeave(to,from,next){// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`}
复制代码

vue-router详细，具体访问：导航守卫数据获取

转载于:https://juejin.im/post/5c35c732518825260b46d6ee

vue路由加载页面时，数据返回慢的问题相关推荐

vue动态路由加载组件，找不到module问题
vue动态路由加载组件,找不到module问题 vue动态加载路由并挂载到vue.路由信息由后端给出,同时component的路径也是后端给出,但是动态加载该路径会报错. 原因:webpack 编译e ...
vue调用接口获取后台数据_使用Vue实现调用接口加载页面初始数据
使用Vue实现调用接口加载页面初始数据闲着没事写了一个电影推荐的网页,很简单,使用的是Vue的实现. let vm = new Vue({ el:'#content', data:{ name:'' ...
Vue3.2 如何使用nprogress设置路由加载进度条
安装 nprogress pnpm install --save nprogress 封装nprogress // 文件位置: src/utils/nprogress.ts // 引入进度条 impo ...
Document.visibilityState 页面监听 vue中实现离开页面时计时停止：停止计时后从上一次开始计时
概述 Document.visibilityState (只读属性), 返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签 ...
php macaw路由没进入路由5入口,教你利用composer实现路由加载
下面由composer教程栏目给大家介绍利用composer实现路由加载,希望对需要的朋友有所帮助! 本教程示例代码见 https://github.com/johnlui/My-First-Fram ...
angularJS 路由加载js controller 未定义解决方案
2019独角兽企业重金招聘Python工程师标准>>> 说明本文主要说明,在angularJS框架使用中,angularJS 路由加载js controller 未定义解决方案. ...
SpringMVC响应的方式,无数据跳转页面,带数据跳转页面.Json数据返回
SpringMVC响应的方式,无数据跳转页面,带数据跳转页面.Json数据返回页面跳转设定 //转发会把后端携带的request和Response发送到前端jsp,在jsp中可以直接使用其中的数据/ ...
[vue] 第一次加载页面时会触发哪几个钩子？
[vue] 第一次加载页面时会触发哪几个钩子? beforeCreate, created, beforeMount, mounted 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
vue-cli3.x正确打包项目,解决静态资源与路由加载无效的问题,history模式下配合使用nginx运行打包后的项目
vue-cli3.x正确打包项目,解决静态资源与路由加载无效的问题,history模式下配合使用nginx运行打包后的项目参考文章: (1)vue-cli3.x正确打包项目,解决静态资源与路由加载无 ...

vue路由加载页面时，数据返回慢的问题

场景：

思路：

解决方案：

vue路由加载页面时，数据返回慢的问题相关推荐

最新文章

热门文章