共计 1773 个字符，预计需要花费 5 分钟才能阅读完成。
路由的概念 路由的实质就是一种对应的关系，比如说咱们在 url 中地址中输出咱们须要拜访的 url 地址之后，浏览器要去申请这个 url 地址对应的资源那么 url 地址和实在的资源之间就有一种对应关系，就是路由
路由分为前端路由和后端路由
-
后端路由
`1. 概念：依据不同的用户 URL 申请，返回不同的内容 ` `2. 实质：URL 申请地址与服务器资源之间的对应关系 ` -
前端路由
1. 概念：依据不同的用户事件，返回不同的页面内容`2. 实质：用户事件与事件处理函数之间的对应关系 ` - 理解页面数据渲染的演变
最后页面的渲染是由后端路由来实现的然而后端渲染存在性能问题即：假如用户和服务器常常有提交表单这样的行为后端路由就会导致页面被频繁的刷新导致用户体验会十分的差。因而呈现了 Ajax 技术，能够实现页面上的部分刷新，极大地提高了用户应用体验。然而单纯的 Ajax 技术不反对浏览器的后退和回退的这样的历史操作，没方法保留用户在浏览器中的保留的状态。因而，呈现了 SPA：单页面应用程序，所谓的 SPA 就是整个网站只有一个网页，内容的变动是通过 Ajax 部分更新同时反对浏览器的后退和后退
- 理解 SPA 实现的原理之一 ：基于 URL 地址的 hash（hash 的变动会导致浏览器记录拜访历史的变动，然而 hash 的变动触发新的 URL 申请）
实现 SPA 过程中，最外围的技术点就是前端路由
实现前端路由的一个小例子
<!DOCTYPE html>
<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>
<!-- 导入 vue 文件 -->
<script src="./lib/vue_2.5.22.js"></script>
</head>
<body>
<!-- 被 vue 实例管制的 div 区域 -->
<div id="app">
<!-- 切换组件的超链接 -->
<a href="#/zhuye"> 主页 </a>
<a href="#/keji"> 科技 </a>
<a href="#/caijing"> 财经 </a>
<a href="#/yule"> 娱乐 </a>
<!-- 依据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的地位 -->
<!-- 能够把 component 标签当做是【组件的占位符】-->
<component :is="comName"></component>
</div>
<script>
// #region 定义须要被切换的 4 个组件
// 主页组件
const zhuye = {template: '<h1> 主页信息 </h1>'}
// 科技组件
const keji = {template: '<h1> 科技信息 </h1>'}
// 财经组件
const caijing = {template: '<h1> 财经信息 </h1>'}
// 娱乐组件
const yule = {template: '<h1> 娱乐信息 </h1>'}
// #endregion
// #region vue 实例对象
const vm = new Vue({
el: '#app',
data: {comName: 'zhuye'},
// 注册公有组件
components: {
zhuye,
keji,
caijing,
yule
}
})
// #endregion
// 监听 window 的 onhashchange 事件，依据获取到的最新的 hash 值，切换要显示的组件的名称
window.onhashchange = function() {
// 通过 location.hash 获取到最新的 hash 值
console.log(location.hash);
switch(location.hash.slice(1)){
case '/zhuye':
vm.comName = 'zhuye'
break
case '/keji':
vm.comName = 'keji'
break
case '/caijing':
vm.comName = 'caijing'
break
case '/yule':
vm.comName = 'yule'
break
}
}
</script>
</body>
</html>正文完