阿八博客
  • 100000+

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

VueRouter安装和初始化导航

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/1010/116484.html

VueRouter安装和初始化导航

想在Vue应用中使用VueRouter, 我们首先需要安装VueRouter
方法如下:

安装VueRouter

创建Vue根实例时,把路由器对象router注入到Vue实例

Vue实例的$router属性 和 $route 属性都从Vue实例的_routerRoot属性中获取值

 那么从VueRouter实例的apps属性中删除当前Vue实例        var index = this$1.apps.indexOf(app);        if (index > -1) { this$1.apps.splice(index, 1); }        // ensure we still have a main app or null if no apps        // we do not release the router so it can be reused        if (this$1.app === app) { this$1.app = this$1.apps[0] || null; }    });    // main app previously initialized    // return as we don't need to set up new history listener    if (this.app) {        return    }    this.app = app; // 更新VueRouter实例中的app属性指向当前Vue实例    var history = this.history; // 根据router的mode不同,HTML5History对象,HashHistory对象,AbstractHistory对象    if (history instanceof HTML5History) { // history是HTML5History对象, mode == 'history'        //history.getCurrentLocation() 获取当前路径'/'        history.transitionTo(history.getCurrentLocation()); //导航到当前路径对应的页面    } else if (history instanceof HashHistory) { // history是HashHistory对象, mode == 'hash'        var setupHashListener = function () {            history.setupListeners();        };        history.transitionTo(            history.getCurrentLocation(),            setupHashListener,            setupHashListener        );    }    //监听记录会话历史的history对象
如果路由发生变化,更新apps数组中每个Vue实例的_route 属性 history.listen(function (route) { this$1.apps.forEach(function (app) { app._route = route; }); });};

通过代码可以看到 VueRouter中实现导航的使用transitionTo方法

transitionTo

作用:

​ 导航到期望的路由

参数:

​ location: 是一个字符串路径

​ onComplete: 一个回调函数,在确认导航后执行

​ onAbort:一个回调函数,在终止导航解析(导航到相同的路由, 或在当前导航完成之前导航到另一个不同的路由)时执行

工作流程:

根据参数location获取目的路由对象route调用confirmTransition 确认导航

2.1 如果确认要导航到目的路由,执行以下操作

​ a) 调用updateRoute更新路由

​ b) 如果存在onComplete, 调用onComplete回调函数

​ c) 调用ensureURL进行导航

​ d) 如果还没有执行需要在完成初始化导航后需要调用的回调函数,那么就执行回调,这些回调函数通过onReady注册,保存在readyCbs中

2.2 如果终止导航解析,执行以下操作

​ a) 如果存在onAbort , 调用onAbort 回调函数

​ b) 如果还没有执行 初始化路由解析运行出错时需要调用的回调函数,那么就执行回调
这些回调函数通过onReady定义,保存在readyErrorCbs中

具体实现如下:

调用updateRoute更新路由

更新路由, 并调用全局后置守卫afterEach


												

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!