页面路由(浏览器路由)
页面会刷新
window.location.href = "http://www.baidu.com"
history.back()
hash路由
页面不会刷新,之前做单页应用,使用的传统方法。
window.location.hash='#bb365';
监听hash 的变化:
window.onhashchange = function(){
console.log("current hash:" ,window.location.hash)
}
h5 路由
h5新出的API,页面不会刷新,单页应用必备。不仅可以更改hash, 更改pathname也不会刷新页面。
//推进一个状态
history.pushState('name', 'title', '/path')
//替换一个状态
history.replaceState('name','title','/path2')
// 以上替换,不会新增一条浏览历史
// popstate 只处理后退,不能监听前进
window.onpopstate = function(){
console.log(window.location.href)
console.log(window.location.pathname)
console.log(window.location.hash)
console.log(window.location.search)
}
React-Router常见的API
// 路由方式
<BrowserRouter> 对应h5 路由
<HashRouter> 对应hash路由
// 路由规则
<Router>
// 路由选项
<Switch>
// 跳转导航
<Link> <NavLink>
// 自动跳转
<Redirect>
1. react-router的实现原理
2. 前端路由实现及 react-router v4 源码分析
3. react-router了解一下