路由：主要是可以实现单页面应用
路由及工作原理介绍
前端路由和后端路由不是同一个东西，不要搞混淆
-
后端路由:url地址和后端逻辑的对应关系
-
前端路由:url地址和组件的对应关系
-
1.前端中的路由 ： 不同的路径对应加载不同的页面，且页面不会跳转
-
路由的功能类似于tab切换，但是更加的高级，性能更好
-
2.路由的工作原理 ：
监听网页hash值变化 -
-
(1)修改网页的hash值
-
hash值原本的作用是来做锚点定位的，它有一个特点就是页面不会跳转
-
-
(2)给window注册onhashchange事件，监听hash值变化
- 当页面hash变化时，就会执行这个事件处理函数，然后就可以根据不同hash值加载不同页面
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
1.前端中的路由 ： 不同的路径对应加载不同的页面，且页面不会跳转
2.路由的工作原理 ： 监听网页hash值变化
(1)修改网页的hash值
* hash值原本的作用是来做锚点定位的，它有一个特点就是页面不会跳转
(2)给window注册onhashchange事件，监听hash值变化
* 当页面hash变化时，就会执行这个事件处理函数，然后就可以根据不同hash值加载不同页面
-->
<!-- 1.点击按钮：修改地址栏的hash值 -->
<button onclick="window.location.hash = '#/a'">按钮1</button>
<button onclick="window.location.hash = '#/b'">按钮2</button>
<button onclick="window.location.hash = '#/c'">按钮3</button>
<div id="box">
我是组件
</div>
<script>
//2.给页面注册hash值变化事件
window.onhashchange = function(){
if(window.location.hash == '#/a'){
box.innerHTML = '<p>我是组件A</p>';
}else if(window.location.hash == '#/b'){
box.innerHTML = '<p>我是组件B</p>';
}else if(window.location.hash == '#/c'){
box.innerHTML = '<p>我是组件C</p>';
}
};
</script>
</body>
</html>
单页面应用SPA介绍
-
singal page application
目标: 了解什么是单页面应用, 以及前端路由作用
单页面应用: 所有功能在一个页面上实现
前端路由: 实现业务场景切换
经典单页面应用案例：网易云音乐
单页面-多页面对比
| 对比部分 | 单页应用 | 多页面应用 |
|---|---|---|
| 组成 | 一个html文件多个组件组成 | 多个html文件 |
| 静态资源共用 | 共用，一次性加载完毕 | 不共用，每个页面都加载一遍 |
| 刷新方式 | 页面局部刷新 | 整页加载 |
| url模式 | itcast.com/#/pageone | itcast.com/pageone.html |
| 用户体验 | 用户体验良好 | 页面切换加载缓慢体验较差 |
| 数据传递 | 容易 | 依赖url传参，cookie,localStorage |
| 搜索引擎优化 | 不利于seo优化，需要ssr优化(服务端渲染) | 支持良好 |
| 使用场景 | 追求高体验 不要求seo | 高度要求seo |
| 开发成本 | 较高 需要依赖专业的框架, 开发效率高 | 较低 重复代码多, 开发效率低 |
优点：
- 整体不刷新页面，用户体验更好
- 数据传递容易, 开发效率高
缺点：
- 开发成本高(需要学习路由)
- 首次加载会比较慢一点。不利于seo搜索引擎优化
总结: 单页面应用, 用户体验好, 开发效率高
