石油 技术支持 东莞网站建设中国核工业二三建设有限公司太平岭项目部

    在单页面应用SPA中，路由描述的是URL与视图之间的映射关系，这种映射是单向的，即URL变化引起视图更新（无需刷新页面）。  

    1、hash模式

        原理：

            用 url + #后面的hash值 来模拟一个完整的url，直接刷新页面不会导致浏览器向服务器发出新的请求，路由切换时不会

            当调用$router.push方法，会改变hash值触发hashchange事件，前进到指定的url。vue-router会根据url做路由匹配来修改页面内容，实现路由切换的效果

            改变hash值触发hashchange事件，hashchange事件对象中会记录变化的url。点击浏览器的前进后退，会改变hash值，实现路由切换的效果

        特点：

            地址栏有#，影响美观，直接刷新页面不会报404

2、history模式

        原理：

            用 url + 路径 真正实现一个完整的url，直接刷新页面会导致浏览器向服务器发出新的请求，路由切换时不会

            当调用$router.push方法，会改变路径调用pushState方法，前进到指定的url。vue-router会根据url做路由匹配来修改页面内容，实现路由切换的效果

            改变路径调用pushState方法，pushState方法中会记录变化的url。点击浏览器的前进后退 或者 手动调back、forward、go方法，会触发popstate事件，实现路由切换的效果

        特点：

            地址栏没有#，不影响美观，直接刷新页面会报404，需要后端在Nginx中做代理地址的配置