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官方路由
转载：https://blog.csdn.net/qq_40282016/article/details/116990426
查看评论