Vue 的路由实现 Hash模式 和 History模式

时间:2023-01-12 07:50:37

Hash 模式:

Hash 模式的工作原理是onhashchange事件,Window对象可以监听这个事件...

可以通过改变路径的哈希值,来实现历史记录的保存,发生变化的hash 都会被浏览器给保存下来,所以下次尽管浏览器没有请求服务器,但是还是将页面和url 给关联起来,这就是所谓的前端路由。

每次或者了哈希值,就知道路径,知道路径,就能获得路由组建,有了路由组建,就可以将页面显示出来。

History 模式:

通过浏览器保存历史路径,由于Hash模式,每次只能改变#后面的路径参数,history 则给予了前端路由完全的*。

通过api 取访问历史路径,history,back(),forward(),go(),实现了页面的回退,前进,以及跳转,

在vue.js中也可以用$router.push(url), $router.replace(),$router.back(),

$router.push(url) 是一层一层退,(数据结构是栈)

$router.replace,是直接替换它不会向 history 添加新记录。

相关文章