vue学习(三) - vue-router

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战。

结束了最近项目中使用的自动化构建，继续开始我们的vue项目学习计划吧 正如所有优秀框架都有的特点 -- 精简。无论是vue还是react，都将很多功能通过插件形式外放出去，vue-router就是vue用来管理路由的一个官方组件。

1.介绍

vue-router所指的路由其实就就是SPA（单页应用）的路径管理器，将路径和组件映射起来，路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。

2.原理

vue-router提供了两种路由模式：hash和history，通过mode属性来控制。在初始化对应的history之前，会对mode做一些校验：若浏览器不支持HTML5History方式（通过supportsPushState变量判断），则mode强制设为'hash'；若不是在浏览器环境下运行，则mode强制设为'abstract'。我们这里就先看看浏览器的两个方式。

• hash模式

vue-router默认使用hash模式，通过url的hash来模拟完整的路由，当url（#号后面）改变时，页面不会重新加载。#后面每一次改变时，通过监听hashchange事件，会在浏览器历史记录里加一条记录，每次回退，就是回到上一条记录。

• history模式

History interface是浏览器历史记录栈提供的接口，通过back(), forward(), go()等方法，我们可以读取浏览器历史记录栈的信息，进行各种跳转操作。和hashchange类似，history也提供了popstate的监听。 Html5的到来，给history提供了两个新方法：pushState(), replaceState()。这两个方法有共同的特点，就是修改浏览器历史记录栈后，虽然当前URL改变了，但浏览器不会立即发送请求该URL。

• 混入

可以看到install方法中

Vue.mixin({
    beforeCreate () {
        if (isDef(this.$options.router)) {
        this._routerRoot = this
        this._router = this.$options.router
        this._router.init(this)
        Vue.util.defineReactive(this, '_route', this._router.history.current)
        } else {
            this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
        }
        registerInstance(this, this)
    },
    destroyed () {
        registerInstance(this)
    }
})

通过vue.mixin，在beforeCreate中将router的一系列操作注册监听，实现对页面的更新。