可信网站权威性怎么样,网站目录管理模板,个人网站制作,热烈祝贺网站上线1.路由是什么#xff1f; Router路由器#xff1a;数据包转发设备#xff0c;路由器通过转发数据包#xff08;数据分组#xff09;来实现网络互连
Route路由#xff1a;数据分组从源到目的地时#xff0c;决定端到端路径的网络范围的进程 | - 网络层
Distribute分发…1.路由是什么 Router路由器数据包转发设备路由器通过转发数据包数据分组来实现网络互连
Route路由数据分组从源到目的地时决定端到端路径的网络范围的进程 | - 网络层
Distribute分发数据包或任务根据规则分配到不同的路径
Default Route默认路由路由表中没有匹配的路由时默认显示的路由
Fallback Routing404路由/保底路由匹配所有处理未定义或未找到路由请求的特殊路由
Nested Routing嵌套路由一个路由组件内部定义其他路由组件形成父子结构的路由
Routing Table路由表存储到各个目的地的最佳路径的表引导分组转送 | - 对象
#原生js实现路由/* index.html */
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTest Router/title/head
bodysectiona href#1page 1/abr/a href#2page 2/abr/a href#3page 3/abr/a href#4page 4/abr//sectiondiv idapp/divdiv iddiv1 styledisplay: none1/divdiv iddiv2 styledisplay: none2/divdiv iddiv3 styledisplay: none3/divdiv iddiv4 styledisplay: none4/divdiv iddiv404 styledisplay: nonespan404/spanhr/spanNot found/span/divscript src./src/main.js/script
/body
/htmlstylea{color: blueviolet;text-decoration: none;}#app{background: pink;font-size: 32px;}#div404{text-align: center;}
/style
/* main.js 实现不同路由匹配不同页面 */function route(){/* 获取hash */let hashwindow.location.hashlet numberhash.substr(1) || 1console.log(hash,number)/* 获取并显示当前哈希匹配的div */let divdocument.querySelector(#div${number})if (div) {div.style.display block;let app document.querySelector(#app);app.appendChild(div);}else{/* 保底路由404 */div document.querySelector(#div404)div.style.display block;document.querySelector(body).appendChild(div);}
}
route()window.addEventListener(hashchange,(){/* 隐藏所有div */let allDivs document.querySelectorAll([id^div]);allDivs.forEach(div div.style.display none);/* 更新路由匹配 */route()
})
2.路由的三种模式
