全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

vue-router两种路由模式实现原理

发布时间:2023-02-27 18:00:42
发布人:syq

  Vue Router 支持两种路由模式:Hash 模式和 History 模式。

  1.哈希模式

  Hash 模式是通过改变 URL 中的 hash(#)来实现路由的。例如:

http://example.com/#/about

  在这个 URL 中,# 后面的 /about 就是路由的路径。当我们点击页面中的链接或调用 router.push() 方法时,Vue Router 会将新的路由添加到 URL 中的 hash 后面,浏览器会自动滚动到页面中相应的位置,并触发相应的组件渲染。

  Hash 模式的实现原理很简单:Vue Router 监听浏览器的 hashchange 事件,然后根据当前的 hash 值匹配路由表中的相应路由,并触发相应的组件渲染。

  2.历史模式

  History 模式是通过 HTML5 中的 history API 来实现路由的。例如:

1

  在这个 URL 中,/about 就是路由的路径。当我们点击页面中的链接或调用 router.push() 方法时,Vue Router 会使用 history.pushState() 方法将新的路由添加到浏览器的历史记录中,并触发相应的组件渲染。

  History 模式的实现原理也很简单:Vue Router 使用 history.pushState() 方法将新的路由添加到浏览器的历史记录中,然后通过监听 popstate 事件来响应浏览器的前进和后退按钮。当用户点击前进或后退按钮时,Vue Router 根据当前的 URL 匹配路由表中的相应路由,并触发相应的组件渲染。

  需要注意的是,使用 History 模式时,需要在服务器端进行相应的配置,以确保在用户直接访问路由时可以正确地返回对应的页面。

vue-router两种路由模式实现原理

相关文章

python写入json文件?

python写入json文件?

2023-11-02
vscode设置tab为4个空格?

vscode设置tab为4个空格?

2023-11-02
更新pycharm?

更新pycharm?

2023-11-02
anaconda每次打开都要安装?

anaconda每次打开都要安装?

2023-11-02

最新文章

武汉新媒体行业公司排名

武汉新媒体行业公司排名

2023-11-01
武汉新媒体就业现状好吗

武汉新媒体就业现状好吗

2023-11-01
武汉全媒体行业发展现状及趋势

武汉全媒体行业发展现状及趋势

2023-10-31
武汉全媒体现状

武汉全媒体现状

2023-10-31
在线咨询 免费试学 教程领取