一,路由原理
1.定义:端到端的传输路径
2.路由的结构
- protocal:协议头
- hostname:域名
- port:端口
- pathname:路径名
- search:查询参数
- hash:哈希,定位锚点,不会传输给服务器
3.查询路由信息:window.location
4.路由前端路由和后端路由两种
- 后端路由:资源路径,其返回结果可能是图片、json、html等
- 前端路由:前端自身解析路由信息
5.前端路由的特性
- 改变url 不向服务器发送请求。
注:这里的改变指的是js 动态改变,而不是对页面的刷新。
- 前端能够监听url 变化。
- 前端能够解析url 信息,并执行相应操作。
6.前端路由的实现方式有两种:hash,history
二, hash 实现前端路由
1.api
- window.location.assign:改变浏览器地址,生成一条新的历史记录
- window.location.replace:改变浏览器地址,不会生成新的历史记录
- window.location.onhashchange:改变路由hash 值的监听方法
2.运作流程
3.特点:
- 丑
- 占用锚点功能
- 兼容性好
4.示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hash</title>
<style>
#space{height: 1500px;background-color: #f7ead9}
</style>
</head>
<button id="btn1">assign hash</button>
<button id="btn2">replace hash</button>
<a href="#hash">a 标签通过href追踪id为hash的DOM 节点</a>
<div id="space"></div>
<h3 id="hash">hash 链接的目标</h3>
<body>
<script>
window.addEventListener('hashchange',function(event){
console.log(event);
})
document.getElementById('btn1').onclick=function(){
window.location.assign('#/hash');
}
let n=0;
document.getElementById('btn2').onclick=function(){
window.location.replace('#/hash'+n++);
}
</script>
</body>
</html>
三, history 实现前端路由
1.api
- window.history.pushstate:改变浏览器地址,生成一条新的历史记录
- window.history.replacestate:改变浏览器地址,并覆盖当前历史记录
- window.history.onpopstate:浏览器后退或前进时触发
2.特点
- 兼容到ie10
- 路由与后端无异,可以直接改变路径名称,而不是只能改变hash 值
- 需要后端支持,因为路由在刷新页面的时候还是会向服务器发起请求,若服务器没有相应路径,就会报404 错误
3.运作流程
4.示例
<button id="btn1">assign hash</button>
<button id="btn2">replace hash</button>
<body>
<script>
window.addEventListener('popstate',function(event){
console.log(event);
})
document.getElementById('btn1').onclick=function(){
window.history.pushState(null,null,'/p1');
}
let n=0;
document.getElementById('btn2').onclick=function(){
window.history.replaceState(null,null,'/r'+n++);
}
</script>
</body>
四, 后端支持支持history
1.以koa 为例。
routeTest 文件夹是带有history 路由功能的项目文件,置入一个后端项目koa-test中,作为后端项目的一部分,此后端项目中,还会有其它的项目。
2.在app.js 轴配置后端路由
router.get('/routeTest',routeTest);
router.get('/routeSecond',routeTest);
async function routeTest(ctx) {
await ctx.render('routeTest/index');
}
- 在前端向服务端发起' http://127.0.0.1:300/routeTest'和' http://127.0.0.1:300/routeSecond' 请求的时候,都会打开routeTest 项目下的index.html文件。这样在刷新页面的时候,就不会报404 的错误了。
- 完整app.js 代码
const Koa=require('Koa');
const KoaRouter=require('koa-router');
const path=require('path');
const render=require('koa-ejs');
const app=new Koa();
const router=new KoaRouter();
render(app,{
root:path.join(__dirname,'views'),
layout:'layout',
viewExt:'html',
cache:false,
debug:false
})
router.get('/',index);
router.get('/routeTest',routeTest);
router.get('/routeSecond',routeTest);
async function index(ctx) {
await ctx.render('index', {
msg: 'Free is my love....',
});
}
async function routeTest(ctx) {
await ctx.render('routeTest/index');
}
app.use(router.routes()).use(router.allowedMethods());
app.listen(300,()=>{
console.log('server start...');
})
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。