Vue-Router中的hash模式和history模式

SPA单页面应用：不仅仅在页面交互时无刷新，页面跳转时也无刷新

        为了实现单页面应用，就有了前端路由

前端路由的基本功能：

        ①前端路由可以控制浏览器的history，使浏览器不会在URL发生变化时刷新整个页面   

        ②前端路由需要维护一个URL历史栈，通过这个栈可以返回之前页面、进入下一个页面

vue的路由配置中mode选项，配置hash模式或history模式   默认使用hash模式

        前端路由的核心是在改变视图的同时不会向后端发出请求，浏览器提供这两种支持就是为了达到这一目的。

        1）hash---指url中#及后面的字符

                hash也称作锚点，其中的#本身用来做页面定位，可以使对应的id元素显示在可视区域内

                通过window.location.hash获取hash值

                        window.location对象中有：

hash	host	hostname	href	pathname
设置或返回从#开始的url	设置或返回主机名和当前url的端口号	设置或返回当前url的主机名	设置或返回完整的url	设置或返回当前url的路径部分
port	search	assign()	reload()	replace()
设置或返回当前url的端口号	设置或返回？开始的url（查询部分）	加载新的文档	重新加载当前文档	用新的文档替换当前文档

        hash路由原理：当hash值发生变化时，并不会向服务器发送请求而是会触发onhashchange事件，从而根据hash值来修改页面内容

        hash路径出现在URL中，但是不会出现在HTTP请求中，对后端完全没有影响

          2）history---直接指向History对象，History对象保存了当前窗口访问过的所有页面网址

               ① history.length：历史记录的url数量，初始值为1

               ②可以在浏览器历史之间移动：

go()	接收一个整数作为参数，移动到该整数指定的页面；正数为forward，负数为back
back()	移动到上一个访问页面，从浏览器缓存中加载，而不是要求服务器发送新的网页
forward()	移动到下一个访问页面，等同于浏览器的前进键

                ③history.pushState()--在浏览器中添加历史记录

                        不会触发页面更新，只是导致History对象发生变化

                三个参数：

state	一个与指定网址有关的状态对象，popState事件触发时，该对象会传入回调函数，不需要可填null
title	新页面的标题，但所有浏览器目前都忽略这个值，填null
url	新的网址，必须与当前页面处在同一个域，浏览器地址栏将显示这个网址

                如果pushState的url参数设置新的锚点值（hash），并不会触发hashChange事件

                ④history.replaceState()---修改浏览器历史当中的记录

                ⑤history.state返回当前页面的state对象

                ⑥每当同一个文档的浏览历史发生变化时，触发popState事件

                        仅调用pushState或replaceState，不会触发该事件，只有用户点击后退、前进按钮或使用JS调用back、forward、go方法时才会触发；

                        该事件只针对同一个文档，如果浏览历史切换导致加载不同的文档，则不会触发

                ⑦history.scrollRestoration = 'manual' 关闭浏览器自动滚动行为

                    history.scrollRestoration = 'auto'     打开浏览器自动滚动行为（默认） 

                history路由原理：利用window.history(history.pushState或history.replaceState)相关api实现路由跳转，从而改变页面内容。由于通过history的api进行路由跳转，并不会向服务器发起请求，也达到了前端路由的目的

                        history需要后端配合，否则页面刷新，或者根据路径直接访问项目会报404错误，因为打包后的文件一般只有index.html文件和一些打包后的js文件及文件夹，所以需要后端重定向到首页，进入项目后，再进行路由匹配