js与juqery路由跳转的基本实现方法
路由原理：
1、准备视图(html)
2、准备路由的路线(可以是一个对象，键名是路线名称和值是视图地址)
3、通过hash地址的路线，获取“视图地址”
4、在指定标签中，加载需要的视图页面
index.html同级有detail.html和list.html页面
<!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></head><body> <ul> <li><a href="#/detail">介绍页</a></li><!-- 定义跳转的链接是什么 注意：href填的是hash地址，这里的 #/ 不要去掉 ，为的是不改变域名(地址栏中#前面的为域名--> <li><a href="#/list">列表页</a></li> </ul> <div id="box"> </div></body></html><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script> let router = { /* 创立一个路由,是一个对象,对象里面kv存放hash值和路径页面 */ "#/detail":'./detail.html', "#/list" : './list.html' }window.addEventListener('hashchange',()=>{/* 通过监听页面的hash值变更,调用jq的load方法,把指定路径的html加载到节点上 */ console.log(location.hash) // $('#box').load(router[location.hash])/* jquery中实现在指定容器中加载页面,通过中括号语法取到对应页面的路径,加载到id为box的节点上 */ window.location.href = `${router[location.hash]}`; //js中实现跳转})</script>说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » js与juqery路由跳转的基本实现方法
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » js与juqery路由跳转的基本实现方法
