Vue技术栈（4）

vue-router vue路由

什么是路由

在Web前端单页应用SPA(Single Page Application)中，路由描述的是URL与U之间的映射关系，这种映射是单向的,即在无需刷新页面的情况下URL变化引起U更新

如何实现路由 ？

概述：要实现前端路由，需要解决两个核心

1.如何改变URL却不引起页面刷新？

2.如何检测URL变化了？

两种实现方式

hash

•  hash是URL中hash (#)及后面的那部分，常用作锚点在页面内进行导航,改变URL中的hash部分不会引起页面刷新
• 通过hashchange事件监听URL的变化,t通过hash改变URL的方式只有这三种：

1.  通过浏览器前进后退改变URL
2. 通过<a>标签改变URL
3. 通过window.location改变URL

history

•  概述:(HTML API)History接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。
• 属性：

1.  History.length  ·        返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页。例如，在一个新的选项卡加载的一个页面中，这个属性返回1.
2. History.state                返回一个表示历史堆栈顶部的状态的值。这是一种可以不必等待popstate事件而查看状态的方式。

•  方法：

1.  History.back()前往上一页，用户可点击浏览器左上角的返回按钮模拟此方法.等价于history.go(-1)
2. History-.go()        通过当前页面的相对位置从浏览器历史记录(会话记录)加载页面
3. History.pushState()    按指定的名称和URL(如果提供该参数）将数据push进会话历史栈，数据被DOM进行不透明处理;你可以指定任何可以被序列化的javascript对象
4. History.replaceState()     按指定的数据，名称和URL(如果提供该参数)，更新历史栈上最新的入口。这个数据被DOM进行了不透明处理。你可以指定任何可以被序列化的javascript对象

•  history提供了pushState和replaceState两个方法，这两个方法改变URL的path 部分不会引起页面刷新
• 如何监听URL变化

1.  history提供类似hashchange事件的popstate事件，但popstate事件有些不同
2. 通过浏览器前进后退改变URL时会触发popstate事件
3. 通过pushState/replaceState或<a>标签改变URL不会触发popstate事件
4. 拦截pushState/replaceState的调用和<a>标签的点击事件来检测URL变化
5. 通过js 调用history的back，go，forward方法课触发该事件