路由模式

vue

参考 (opens new window)
官方文档 (opens new window)

# hash

  • url带有#
  • url与页面是有关联的,可以利用onhashchange监听url变化

# history

  • 说说html5的history方法吧

# pushState(state object, title, page)

  • 一个状态对象, 一个标题 (FireFox目前被忽略), 和 (可选的) 一个URL
  • 不会触发hashchange事件
  • 新建了历史记录 1、假设有两个页面foo.html,bar.htmlfoo.html中执行以下Js
var stateObj = { value: "111" };
history.pushState(stateObj, "bar", "bar.html")
1
2

代码执行完毕之后,我们可以发现url进行了跳转,但是内容没有变化,刷新之后又可以见了。

# replaceState()

  • 效果与上面一样,但是是修改了当前页面的历史记录。而不是新建一个。

# vue路由的实现原理

参考 (opens new window)

  • hash 通过hashChange监听url的变化,来改变页面的内容
  • history 是通过history.pushState来进行跳转和记录内容,通过监听popstate事件进行改变页面的内容
Last Updated: 3/28/2025, 11:10:43 AM