vue路由原理

Posted 2023-04-12

参考技术A 什么是前端路由？
在单页面中，路由描述的是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，进而更新页面视图。

VUE路由原理

1: hash

2: history

区别： 前者地址栏会带有#，后者没有，显得美观一点

 

路由原理：前段路由实现本质是监听URL的变化，然后匹配路由规则显示相应页面，并且无须刷新。

 

hash模式：

      a: 点击或浏览器历史跳转时，触发onhashchange事件,然后根据路由规则匹配显示相应页面(遍历路由表，装载相应组件到router-link)；

      b: 手动刷新时,不会像服务器发送请求（不会触发onhashchange），触发onload事件，然后根据路由规则匹配显示相应页面；

    

history模式：

     a:跳转时会调用history.pushState方法,根据to属性改变地址，并切换相应组件到router-link;

     b:浏览器历史操作（前进，后退）,只会改变地址栏（页面内容不会变）,不会切换组件，需要使用popstate方法来切换组件；

     c: 手动刷新,需要后端配合重定向，不然404