路由的基本概念与原理
路由
路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源。
那么url地址和真实的资源之间就有一种对应的关系,就是路由。
一:后端路由:由服务器端进行实现,并完成资源的分发
概念:根据不同的用户URL请求,返回不同的内容
本质:URL请求地址与服务器资源之间的对应关系
- 后端渲染(存在性能问题) 如果不停的提交表单,就会导致页面不停的刷新
- Ajax前端渲染(前端渲染提高性能,但是不支持浏览器的前进后退操作)
- SPA (Single Page Application)单页面应用程序:整个网站只有一个页面,内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作
- SPA实现原理之一:基于URL地址的hash (hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求)
- 在实现SPA过程中,最核心的技术点就是前端路由
二:前端路由:依靠hash值(锚链接)的变化进行实现
概念:根据不同的用户事件,显示不同的页面内容
本质:用户事件与事件处理函数之间的对应关系
1:实现简易前端路由
举例:点击菜单的时候改变URL的hash,根据hash的变化控制组件的切换
- 如何监听到hash的变化???
//监听window 的 onhashchange事件
//根据获取到的最新的 hash值,切换要显示的组件的名称
window .onhashchange= function () {
//通过location.hash获取到最新的hash值
}
<!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: 'keji'
},
// 注册私有组件
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>
2:HTML5的history模式
修改网址栏的地址,而不刷新界面
1:history.replaceState()
location.href
“http://192.168.1.101:8000/”
history.replaceState({}, '', '/foo')
< undefined
location.href
“http://192.168.1.101:8000/foo”
history.replaceState({}, '', '/foo/bar')
< undefined
location.href
< “http://192.168.1.101:8000/foo/ bar”
2:history.go()
location.href
<. “http://192.168.1.101:8000/”
history.go(-1)
<. undefined
location.href
“http://192.168.1.101:8000/foo”
history.go(-1)
< undefined
location.href
<. “http://192.168.1.101:8000/examples/urlChangel”
history.go(1)
< undefined
location.href
“http://192.168.1.101:8000/foo”
补充说明:
history.back()等价于history.go(-1)
history.forward()则等价于history.go(1)
这三个接口等同于浏览器界面的前进后退。