Vue教程(四十一)Vue-router路由初体验

Vue教程(四十一)Vue-router路由初体验

什么是路由

路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。

那么url地址和真实的资源之间就有一种对应的关系，就是路由。

• 前端路由

  前端路由是依靠hash值(锚链接)的变化进行实现，根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系

  前端路由主要做的事情就是监听事件并分发执行事件处理函数。

• 后端路由

  后端路由是由服务器端进行实现，并完成资源的分发

什么是SPA

SPA（single-page application），翻译过来就是单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载，也不会将控制转移到其他页面举个例子来讲就是一个杯子，早上装的牛奶，中午装的是开水，晚上装的是茶，我们发现，变的始终是杯子里的内容，而杯子始终是那个杯子结构如下图

修改路径不刷新页面

// window.location.hash这个属性可读可写。读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录。
location.hash='bar'
location.href
// 执行结果："http://localhost:8080/#bar"

// HTML5新特性history.pushState()方法，会在浏览器历史中添加新的记录，而且并不会刷新页面。
history.pushState({
   },'','home');
// 执行结果：undefined
location.href
// 执行结果："http://localhost:8080/home"

// history.back(); 缓存 返回上级页面不刷新数据
history.back()
// 执行结果： ƒ back() { [native code] }
location.href
// 执行结果："http://localhost:8080/home"

// HTML5新特性 history.replaceState()方法，会替换当前浏览器历史中的记录，也并不会刷新页面。
history.replaceState({
   },'','products');
// 执行结果：undefined
location.href
// 执行结果："http://localhost:8080/products"

// history.go()通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面。比如：参数为-1的时候为上一页，参数为1的时候为下一页.
// 调用没有参数的 go() 方法或者参数值为0时，重新载入当前页面。
history.replaceState({
   },''