0
点赞
收藏
分享

微信扫一扫

vue路由原理

眸晓 2022-03-14 阅读 115

什么是前端路由?

在单页面中,路由描述的是URL和UI之间的单向映射关系,即URL的变化引起UI的更新,不需要刷新。

核心原理之一:它只是更新视图,不重新请求页面

两种方式:1、hash 利用URL中的hash(“#”) 2、利用history interface在h5中新增的方法

Hash和history的区别?

要实现前端路由,需要解决两个核心:

1、如何改变URL不引起页面的刷新?

2、如何检测URL更新了?

分别从hash和history两种方式实现上面的两个核心问题:

1、hash模式

Hash是url中hash(‘#’)及后面的部分,常用作锚点在页面进行导航

通过hashchange事件监听URL的变化,改变url的方式只有这几种:

(1)通过浏览器的前进和后退改变URL

(2)通过<a>标签改变URL

(3)通过window.location改变URL

2、History模式

history提供了pushState和replaceState两个方法,history提供类似hashchange事件的popstate事件,但popstate事件有些不同:

(1)通过浏览器前进后退改变URL时会出发popstate事件

(2)通过pushState和replaceState或者<a>标签改变URL不会触发popstate事件

(3)但是我们可以拦截pushState和replaceState的调用或者<a>标签的点击事件来检测URL的变化

(4)通过js调用history的back、go、forward方法可触发该事件

Vue Router的核心是,通过Vue.use注册插件,在插件的install方法中获取用户配置的router对象。当浏览器地址发生变化的时候,根据router对象匹配相应的路由,获取组件,然后把组件渲染在视图上。

(1)如何在install方法中获取用户配置的router对象

可以利用在Vue.mixin混入生命周期函数beforeCreate,在beforeCreate函数中可以获取到vue实例上的属性并赋值到vue原型链上。

(2)如何触发更新

Hash模式下:

通过location.hash改变hsh值,触发更新,

通过监听hashchange实践监听浏览器前进或者后退,触发更新。

History模式下:

通过history.pushState修改浏览器地址,触发更新;

通过监听popstate事件监听浏览器前进或者后退,触发更新;

如何渲染router-view组件;

通过Vue.observable在router实例上创建一个保存当前路由的监控对象current,

当浏览器地址变化的时候,改变监控对象current;

在router-view组建中监听监控对象current的变化,当current变化后,获取用户注册的相应component,并利用h函数将component渲染成vnodes,进而更新页面视图。

举报

相关推荐

0 条评论