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

2022-11-08 17:15:43 浏览数 (1)

  • 路由介绍

  • 前端如何使用路由

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


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


路由介绍


什么是路由?

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


路由形式

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


第一种形式:单播


第二种形式:任播


第三种形式:多播


第四种形式:广播


第五种形式:地域性广播


前端如何使用路由


路由形式

index.js

代码语言:javascript复制
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

代码语言:javascript复制
<!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>

0 人点赞