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得到numberlet 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官方路由