49·灵魂前端工程师养成-Vue路由Router

DriverZeng

发布于 2022-11-08 17:15:43

2160

发布于 2022-11-08 17:15:43

文章被收录于专栏：Linux云计算及前后端开发Linux云计算及前后端开发

路由介绍

前端如何使用路由

-曾老湿, 江湖人称曾老大。

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

路由介绍

什么是路由？

自己去学习网络知识，我的博客中有，自己找一找 ...

路由形式

红球如何走，取决于路由是哪种形式

第一种形式：单播

第二种形式：任播

第三种形式：多播

第四种形式：广播

第五种形式：地域性广播

前端如何使用路由

路由形式

index.js

console.log(window.location.hash)
const number = window.location.hash.substr(1)
console.log(number)
const div = document.querySelector(`#div${number}`)
console.log(div)
const app = document.querySelector('#app')
div.style.display = 'block'
app.appendChild(div)

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
    <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>

    <script src="src/index.js">
    </script>
</body>

</html>