前端路由
稍微复杂一点的SPA（singel page Web application：单页web应用）, 都需要路由
spa的路由叫做前端路由，如果是后端路由就不是spa了，就是多页面应用了
1.vue-router的路由模式
1.1Hash
网页url组成部分
location // 位置 location.protocol // http 协议 location.hostname // ip地址 也可能是域名 location.host // ip地址带端口 location.port // 端口 location.pathname // 后面整个path部分 location.search // ?后面参数 ?id=1 location.hash // #后面一部分 #123i
通过hash变化触发路由的变化 。
2.hash的特点
hash变化触发网页跳转，即浏览器的前进和后退
2.hash变化不需要刷新页面 spa必须的特点
3.hash永远不会提交到server端（前端自生自灭）
创建的文件html 可以命令行
http-server -p 8001 //启动服务 我使用的启动失败
// 代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>location</div>
<button id='btn'></button>
<script>
var log = console.log.bind(console)
window.onhashchange = (event) => {
log('old url', event.oldURL)
log('new url', event.newURL)
log('hash', location.hash)
}
//页面初次加载，获取hash
document.addEventListener('DOMContentLoaded', () => {
log('load hash:', location.hash)
})
//js修改hash
document.getElementById('btn').addEventListener('click', () => {location.href = '#/user'})
</script>
</body>
</html>
// 改变hash的两种办法 1.js改变 2.手动改变
//hash值变化会改变浏览器的前进与后退