Vue Router - 前端路由实现思路（三种模式：hash、history、memory）

1.路由是什么

• 搞清楚这几个概念：
• 路由
• 分发
• 路由表
• 默认路由
  如果没有#n，就给一个默认值
  number = number || 1;
• 404 路由 / 保底路由
  如果用户输入了错误路径，就给一个404页面，保证用户总是能够看到一个页面
• 嵌套路由

1.1 路由器

• 如果家里有1个即以上的人要上网，就需要一个路由器
• 上网路由
  1.用户上网连接路由器，路由器看你想连哪里，就会把信号包发给相应的地方（百度、抖音、腾讯等）
  2.分发：分别发送到各个地方
  3.路由就是分发请求，路由器就是分发请求的东西
  4.路由都是一对多的（一个用户可以发送多个请求到不同地方）
• 总结：分发请求的对象就是路由

1.2 前端路由

• 路由表：一个存储到各个目的地的最佳路径的表
  路由根据路由表来传送
• 前端路由
  根据用户提供的url是：http://127.0.0.1/#1、#2、#3、#4分别展示DIV1、DIV2、DIV3、DIV4界面
• hash：hash就是url中#及其后面的内容
• hash变化
  当URL的片段标识符更改时，将触发hashchange事件 (跟在＃符号后面的URL部分，包括＃符号)
• 代码优化逻辑
  1.重复的代码放到一个函数里面
  2.if…else：
  —如果两个都要执行同一句代码，则放到外面；
  —如果if不需要操作，则把判断翻转（加个！）把else内容放到if中，不要else

1.3 路由表

• hash和div的关系是可以自定义的
  比如：hash给了1，可以找 div1或者 divone

const routeTable = {
     
  // 表驱动编程,这样写了HTML里面就不需要div了
  "1": div1,
  "2": div2,
  "3": div3,
  "4": div4
};

function route(){
     
//根据表来寻找对应的div
let div = routeTable[number.toString()];
}

1.4 嵌套路由

• 如果#1界面里面还有几块子界面：#1/1、#1/2、#1/3
  1.那么就不是在app里面路由，而是在div1里面做路由
  2.所以要给route函数一个参数container，也就是要在哪里路由，容器是哪一个
  3.这样就不需要app这个参数了，而是直接container代替
  4.后面再调用route的时候就需要传参：app
• 和之前的路由一样，给一个hash表：route1Table
• 后面的思路
  1.把1/1分割成两个部分：[1,1]
  2.第一个1就用第一层路由去渲染，就得到了div1
  3.第二个1就用第二个路由去渲染，就在div1里面得到了div11
• 路由可以再分层

2.路由的三种模式

• hash 模式：代码
  任何情况都可以用hash做前端路由
  缺点：SEO不友好，服务器收不到hash（浏览器是不会把#后面的内容发给服务器的，永远只展示默认路由）
  谷歌有专门针对hash的SEO，但没什么用
• history 模式：代码
  后端将所有前端路由都渲染同一页面
  用户不管请求什么都到同一个页面（不能是404页面）
  缺点：IE8以下不支持
• memory 模式：代码
  既不用hash，也不用history，用对象来存储
• 三种模式的区别
  1.前面两种模式都是路径存在url上面（前者是存的hash，后者是路径）
  2.memory是单机路由，不可分享

2.1 hash模式

• 从hash中得到number
  let number = window.location.hash.substr(1);
  有#号，要去掉
• 路径：/#1

2.2 history 模式

• codesandbox网页就支持这个模式
  不论用户后面输入什么乱码（没有路由的情况），都是首页
• 区别
  1.从pathname得到number
  let number = window.location.pathname
  2.routeTable中的key要变成"/1"
  3.a标签中的href由 #n 变成 /n
• 路径：/1
  不需要#
  
• 目前的体验：每次点击都要重新渲染页面，很慢
• 解决：history API

 // 无论点击哪个a标签，跳转到的href页面
//href由我们指定
 window.history.pushState(null, `page ${
       href}`, href);

2.3 hash模式和history模式对比

• 使用条件不用

• number的获取方式不同

• a标签的点击事件不同
  1.history需要阻止默认事件：刷新页面
  2.得到href，然后通过window.history.pushState去相应的href，页面就会在不刷新的情况下变更

• 没有可监听的事件，需要手动通知href改变，然后调用router函数

• 默认页面不同
  1.number默认是/，是存在的

• 点击a标签后，默认做两件事
  1.改变url默认不刷新页面
  2.重新路由

 if (number === "/") {
     
    number = "/1";
  }

2.4 memory 模式

• hash和history都有一个共同点
  把所有数据存在路径后面，不论是/1还是/#1，这里的东西一变，所有的东西都改变
  
• memory不用这个地方，这里不改变，页面不改变
  使用localstorage
  
• 优点
  这种模式适合非浏览器
  比如说app里面做路由，app里面没有路径，不是网页，就用memory模式
• 缺点：没有url
  只对单机有效
  页面没有链接 复制给别人只能进入初始状态

3.Vue-Router 源码

• Vue作者写的路由器
• Vue官方路由