2018-12-19

场景: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://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB

https://router.vuejs.org/zh/guide/advanced/data-fetching.html#%E5%AF%BC%E8%88%AA%E5%AE%8C%E6%88%90%E5%90%8E%E8%8E%B7%E5%8F%96%E6%95%B0%E6%8D%AE

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • VUE Vue :数据驱动的M V Vm框架 m :model(后台提供数据),v :view(页面),vM(模板...
    wudongyu阅读 10,752评论 0 11
  • 一、java虚拟机和Dalvik虚拟机的区别 Java虚拟机: 1、java虚拟机基于栈。基于栈的机器必须使用指令...
    行者_zm阅读 1,800评论 0 1
  • LeetCode 71. Simplify Path Description Given an absolute ...
    ruicore阅读 1,397评论 0 0
  • urls 基本使用 通过导入include模块,实现对层级结构url的路由 urls.py ---> 主路由 ur...
    Karl_2c80阅读 1,020评论 0 0
  • [学习打卡]:骁凡 [打卡日期]:2018/11/20 [累计坚持]:这是我坚持学习的第194天☀️ [学习内容]...
    姜骁凡阅读 4,071评论 0 2