Vue2-Vue Router前端路由实现思路

1.路由是什么?

Router路由器: 数据包转发设备,路由器通过转发数据包(数据分组)来实现网络互连

**Route路由:**数据分组从源到目的地时,决定端到端路径的网络范围的进程 | - 网络层

**Distribute分发:**数据包或任务根据规则,分配到不同的路径

Default Route 默认路由: 路由表中没有匹配的路由时,默认显示的路由

Fallback Routing404路由/保底路由: 匹配所有处理未定义或未找到路由请求的特殊路由

Nested Routing 嵌套路由: 一个路由组件内部定义其他路由组件,形成父子结构的路由

Routing Table **路由表:**存储到各个目的地的最佳路径的表,引导分组转送 | - 对象

html 复制代码
#原生js实现路由

/* index.html */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Router</title>

</head>
<body>
  <section>
     <a href="#1">page 1</a><br/>
     <a href="#2">page 2</a><br/>
     <a href="#3">page 3</a><br/>
     <a href="#4">page 4</a><br/>
  </section>

  <div id="app"></div>

  <div id="div1" style="display: none">1</div>
  <div id="div2" style="display: none">2</div>
  <div id="div3" style="display: none">3</div>
  <div id="div4" style="display: none">4</div>

  <div id="div404" style="display: none">
      <span>404</span><hr/><span>Not found</span>
  </div>

  <script src="./src/main.js"></script>
</body>
</html>

<style>
    a{
       color: blueviolet;
       text-decoration: none;
    }
    #app{
        background: pink;
        font-size: 32px;
    }
    #div404{
        text-align: center;
    }
</style>
javascript 复制代码
/* main.js 实现不同路由匹配不同页面 */

function route(){
    /* 获取hash */
    let hash=window.location.hash
    let number=hash.substr(1) || '1'
    console.log(hash,number)

    /* 获取并显示当前哈希匹配的div */
    let div=document.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.路由的三种模式

相关推荐
OEC小胖胖37 分钟前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
Cacciatore->1 小时前
Electron 快速上手
javascript·arcgis·electron
vvilkim2 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
某公司摸鱼前端3 小时前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
ai小鬼头4 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz4 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子4 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边4 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客4 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
知性的小mahua4 小时前
echarts+vue实现中国地图板块渲染+省市区跳转渲染
vue.js