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

2019-6-19 seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

场景：

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详细，具体访问：导航守卫数据获取

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验、交互设计、 网站建设 、平面设计服务。