vue-router

1、模式

原生 js 实现一个前端路由 router - 掘金
谈谈前端路由 - 掘金
阿里P7：你了解路由吗？ - 掘金
在传统的 Web 开发中，浏览器根据地址栏的 URL 向服务器发送一个 HTTP 请求，服务器根据 URL 返回一个 HTML 页面。这种情况下，一个 URL 对应一个 HTML 页面， 一个 Web 应用包含很多 HTML 页面，这样的应用就是多页面应用；在多页面应用中，页面路由的控制由服务器负责，这种路由方式称为后端路由。
在多页面应用中，每次页面切换都需要向服务器发送一次请求，页面使用的静态资源也需要重新加载，存在一定的浪费。而且，页面的整体刷新对用户体验也有影响，因为不同页面 间往往存在共同的部分，例如导航栏、侧边栏等，页面整体刷新也会导致公共部分的刷新。
有没有一种方式让 Web 应用只是看起来像多页面应用，也就是说 URL 的变化可以引起页面内容的变化，但不会向服务器发送新的请求哪？满足这种条件的 Web 应用就是单页面 应用（Single Page Application，简称 SPA）。单页面应用虽然名为”单页“，但视觉上的感受仍然是多页面，因为 URL 发生变化，页面上的内容也会变化，但这只是逻辑上的多页面，实际上无论 URL 如何变化，对应的 HTML 文件都是同一个，这也是单页面应用名字的由来。在单页面应用中，URL 发生变化并不会向服务器发送新的请求，所以”逻辑页面“的变化只能由前端负责，这种方式称为前端路由。

我：后端路由优点是：安全性好，SEO好，缺点是：加大服务器的压力，不利于用户体验，代码冗合 ，前端的路由就是优点是：前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升缺点是：使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存，同样的不利于seo

Hash
::典型特征是，URL里面带个#号，url当 hash 值发生改变的时候，我们可以通过 hashchange 事件监听到，从而在回调函数里面触发某些方法。::
怎么处罚hashchange事件

• 直接更改浏览器地址，在最后面增加或改变#hash；
• 通过改变location.href或location.hash的值；
• 通过触发点击带锚点的链接；
• 浏览器前进后退可能导致hash的变化，前提是两个网页地址中的hash值不同。

    // 注册路由
    document.querySelectorAll('.api').forEach(item => {
      item.addEventListener('click', e => {
        e.preventDefault();
        let link = item.textContent;
        location.hash = link;
      }, false)
    });

    // 监听路由
    window.addEventListener('hashchange', e => {
      console.log({
        location: location.href,
        hash: location.hash
      })
    }, false)

history
pushState 往浏览历史记录里面添加记录
replaceState 替换当前浏览历史记录
popState 如果浏览历史记录发生变化会触发这个这个事件

404

如果找不到页面怎么办？给一个匹配左右路由的选项，记得写到最后，否则，会把正确路由给覆盖掉

起别名

{
path: ‘/orderContractSign/payOnline/:id’,
component: PayOnline,
alias: ‘/activityContactSign/payOnline/:id’
},