VueRouter进阶三(数据获取)

SimpleTriangle 发布于2019-08-22 11:05 / 2363人阅读

摘要：在导航完成前获取数据通过这种方式，我们在导航转入新的路由前获取数据。我们可以在接下来的组件的钩子中获取数据，当数据获取成功后只调用方法。

数据获取 工具

我们可以使用 ajax 等工具.

我们这里使用了vue-resource

地址:
https://github.com/pagekit/vu...

导航完成后获取数据

当你使用这种方式时，我们会马上导航和渲染组件，然后在组件的 mounted 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。

component:{
    data:function(){
        return {
            shuju:[]
        }
    },
    template:`
            
                {{shujuy.name}}
            
        `,
    mounted:function(){
        this.$http.get(url).then(response => {
            this.shuju = response.body;
        }, response => {

        });
    }
}

在导航完成前获取数据

通过这种方式，我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 beforeRouteEnter 钩子中获取数据，当数据获取成功后只调用 next 方法。

beforeRouteEnter (to, from, next) {
    Vue.http.get(url).then(response => {
    vm.no = false
    vm.shuju = response.body;
    next();
    }, response => {
    next("/")
}},

详细资料:https://github.com/Smallmotor...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91759.html

VueRouter进阶四(滚动行为)

摘要：滚动行为使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。这个方法返回滚动位置的对象信息，长这样如果返回一个布尔假的值，或者是一个空对象，那么不会发生滚动。滚动行为使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面...

kumfo 2019-08-22 11:05 评论0 收藏0
VueRouter进阶（2）-路由元信息

摘要：简单介绍主人公字段介绍我们称每个路由对象为路由记录，路由记录可以嵌套。所以到我们匹配到一个路有的时候他有可能有多条路由记录。路由元信息为什么会有这个东西呢？我们知道我们浏览一些网站的时候有需要验证登录的也有不需要验证登录的，如果所有页面都在做成验证登录的话对于用户的体验也是极差的，所以这个时候路由元信息就起到了很大的作用。简单介绍主人公：meta字段介绍：我们称每个路由对象为...

CoXie 2019-08-21 18:24 评论0 收藏0
VueRouter进阶（1）-导航守卫

摘要：简介主要用来通过跳转或取消的方式守卫导航。判断必要操作是否进行没进行的话中断跳转。进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是确认的。中断当前的导航。如果传入的参数是一个实例，则导航会被终止且该错误会被传递给注册过的回调。简介主要用来通过跳转或取消的方式守卫导航。例如判断登录信息：没登录全部跳到登录页。判断必要操作是否进行没进行的话中断跳转。分为三大类：全局守卫...

renweihub 2019-08-21 18:22 评论0 收藏0
VueRouter进阶一(导航钩子和路由元信息)

摘要：有多种方式可以在路由导航发生时执行钩子全局的单个路由独享的或者组件级的。进行管道中的下一个钩子。当前的导航被中断，然后进行一个新的导航。通过访问组件实例路由元信息你可以在中直接访问。导航钩子 vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。全局钩子你可以使用 router....

liukai90 2019-08-22 11:05 评论0 收藏0
【进阶3-5期】深度解析 new 原理及模拟实现

摘要：使用指定的参数调用构造函数，并将绑定到新创建的对象。由构造函数返回的对象就是表达式的结果。情况返回以外的基本类型实例中只能访问到构造函数中的属性，和情况完全相反，结果相当于没有返回值。定义 new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。 ——（来自于MDN）举个栗子 function Car(color) { this.color = co...

Baaaan 2019-08-23 14:31 评论0 收藏0