vue路由原理

如题所述

第1个回答  2022-06-20
什么是前端路由?
在单页面中,路由描述的是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,进而更新页面视图。