Vue-router原理:1、分析Vue Router

Vue-router原理:1、分析Vue Router

现在我们已经掌握了Vue Router的基本使用，下面我们来模拟Vue Router的实现，通过模拟实现，来了解其内部的实现原理。

我们这里模拟的是History模式。Hash模式基本实现上是一样的。

这里先来复习一下Hash模式的工作原理。

• ·URL中#后面的内容作为路径地址，当地址改变的时候不会向服务器发送请求，但是会触发hashchange事件。
• 监听hashchange事件，在该事件中记录当前的路由地址，然后根据路由地址找到对应组件。
• 根据当前路由地址找到对应组件重新渲染。

下面再来复习一下History模式

• 通过history.pushState()方法改变地址栏，并且将当前地址记录到浏览器的历史记录中。当前浏览器不会向服务器发送请求
• 监听popstate事件，可以发现浏览器历史操作的变化，记录改变后的地址，单击前进或者是后退按钮的时候触发该事件
• 根据当前路由地址找到对应组件重新渲染

1、分析Vue Router

在模拟Vue Router之前，

首先来看一下Vue Router的核心代码，做一个简单的分析

//注册插件
Vue.use(VueRouter)
//创建路由对象
const router=new VueRouter({
    routes:[
        {name:'home',path:'/',component:homeComponent}
    ]
})
// 创建Vue实例，注册router对象
new Vue({
    router,
    render:h=>h(App)
}).$mount('#apps')

我们知道Vue Router是Vue的插件，所以在上面的代码中，我们首先调用use方法注册该插件。

use方法需要的参数可以是一个函数或者是对象，如果传递的是函数，use内部会直接调用该函数，

如果传递的是一个对象，那么在use内部会调用该对象的install方法。

而我们这里传递的是对象，所以后面在模拟VUe Router的时候，要实现一个install

方法。

下面我们创建了VueRouter实例，所以VueRouter可以是构造方法或者是类，那么我们在模拟的时候，将其定义为类。并且该类中有一个静态的install方法，因为我们将VueRouter传递给了use方法。

在VueRouter类的构造方法中，需要有一个参数，该参数是一个对象，该对象中定义了路由的规则。

最后创建了Vue的实例，并且将创建好的Vue Router对象传递到该实例中。

下面我们在看一下Vue Router的类图

在该类图中，上半部分是VueRouter的属性，而下半部分是VueRouter的方法。

options作用是记录构造函数中传入的对象, 我们在创建Vue Router的实例的时候，传递了一个对象，而该对象中定义了路由规则。而options就是记录传入的这个对象的。

routeMap:是一个对象，记录路由地址与组件的对应关系，也就是一个键值对的形式，后期会options中路由规则解析到routeMap中。

data是一个对象，该对象中有一个属性current,该属性用来记录当前的路由地址，data是一个响应式的对象，因为当前路由地址发生变化后，对应的组件要发生更新（也就说当地址变化后，要加载对应组件）。

install是一个静态方法，用来实现Vue的插件机制。

Constructor是一个构造方法，该该构造方法中会初始化options ,data,routeMap这几个属性。

inti方法主要是用来调用下面的三个方法，也就把不同的代码分隔到不同的方法中去实现。

initEvent方法，用来注册popstate事件，

createRouteMap方法，该方法会把构造函数中传入进来的路由规则，转换成键值对的形式存储到routeMap中。 键就是路由的地址，值就是对应的组件

initComponents方法，主要作用是用来创建router-link和router-view这两个组件的。

现在我们已经对Vue Router做了一个分析。

下面开始创建自己的Vue Router.