引航博景网站做的很好吗,公众号开发者id在哪,备案的网站建设书是什么意思,打开一个网站hash 模式 【推荐】 路由效果
在不刷新页面的前提下#xff0c;根据 URL 中的 hash 值#xff0c;渲染对应的页面
http://test.com/#/login 登录页http://test.com/#/index 首页
核心API – window.onhashchange
监听 hash 的变化#xff0c;触发视图更新
window.onhas… hash 模式 【推荐】 路由效果
在不刷新页面的前提下根据 URL 中的 hash 值渲染对应的页面
http://test.com/#/login 登录页http://test.com/#/index 首页
核心API – window.onhashchange
监听 hash 的变化触发视图更新
window.onhashchange (event) {console.log(old url, event.oldURL);console.log(new url, event.newURL);console.log(hash, location.hash);// 执行视图更新比较复杂无需深究
};hash 的特点
hash 变化会触发网页跳转即浏览器的前进、后退hash 变化不会刷新页面单页面应用SPA 必需的特点hash 永远不会提交到 server 端
修改 hash 的方式
通过JS 修改
location.href#/user手动修改 url 里的hash浏览器前进、后退 H5 history 模式 路由效果
在不刷新页面的前提下根据 URL 中的 pathname 值渲染对应的页面。
http://test.com/login 登录页http://test.com/index 首页
核心API – history.pushstate 和 window.onpopstate
使用 history.pushstate 跳转页面避免页面刷新
const state { name: index };
// 使用 history.pushState 跳转页面浏览器不会刷新页面
history.pushState(state, , index);使用 window.onpopstate 监听浏览器前进、后退
//监听浏览器前进、后退
window.onpopstate (event) {console.log(onpopstate, event.state, location.pathname);
};history 的特点
需后端配合 无论访问怎样的 url 都返回 index.html 页面 应该选择哪种模式 to B 面向企业的服务的系统推荐用 hash简单易用对 url 规范不敏感to C面向消费者的服务的系统可以考虑选择 H5 history但需要服务端支持能选择简单的就别用复杂的要考虑成本和收益
