现在我们已经掌握了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