路由模式

lufangzhou 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.html 在foo.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事件进行改变页面的内容