location.hash 原生js页面跳转/路由

使用vue开发项目非常方便，vue全家桶让你想实现什么功能都更加便捷，但是使用原生js,jquery开发，页面之间跳转怎么实现呢，

下面说一下window.location.hash，概念性的东西大家看这篇文章，也比较全面，这里主要说下用法：

当前在做的这个项目，页面跳转使用的是hash，基本原理非常简单，在主页面跳转按钮中分别加上一个属性，data，id等都可以，用来标识当前要跳转的页面，然后在点击跳转时获取到data或id属性的值，保存到window.location.hash中，然后根据当前拿到

的data或id的值，即window.location.hash值动态判断要跳转的路径，还有一个很重要的方法，jquery的load()方法，载入远程 HTML 文件代码并插入至 DOM 中，获取到当前要跳转的hash路径，然后执行load方法，载入要跳转的页面即可：

$(".head_mleft ul li").click(function(){ // 导航按钮点击事件var index=$(this).index();$(this).addClass("head_active").siblings("li").removeClass("head_active");$(this).parents(".head_menu").find(".head_mright ul li").removeClass("head_active");$(".head_menusleve ul").eq(index).toggle();$(".head_menusleve ul").eq(index).show().siblings("ul").hide();var sId = $(this).data("href"); // 获取当前点击按钮的data的href属性window.location.hash =sId; // 保存到hash中self.loadInner(sId); // 页面跳转的方法var Iindex=$(".head_menusleve ul").eq(index).find("li").length;$(".heaad_secord").css({height:Iindex*70+"%",left:(8+index*7.56+"%")});})

loadInner:function(sId){var sId = window.location.hash; // 获取到hash值var path, index;switch(sId) { // 获取与hash值匹配的页面路径case "#home":path = "home.html";break;case "#vehicleTrends":path = "vehicleTrends.html";break;......}$(".containner").load(path); // 载入页面},

还有一个比较重要的方法： data()，可以用来在元素上存放数据，返回的是jquery对象。
data()，load()方法加window.location.hash的综合运用即可实现原生js页面跳转。

location.hash 原生js页面跳转/路由相关推荐

js页面跳转和 js打开新窗口方法
js页面跳转和 js打开新窗口方法 Js返回上一页: 1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history. ...
微信小程序开发系列 (四) ：微信小程序的页面跳转路由设计
笔者由于工作需要,曾经参加过一个微信小程序同 SAP 系统集成的项目,因此从零开始学习了微信小程序的开发知识.这里通过系列文章把自己所学分享出来,希望对相关学习者有所帮助. 本教程前面三篇文章: 微信 ...
js页面跳转和js打开新窗口
js页面跳转和 js打开新窗口方法 Js返回上一页: 1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history. ...
js页面跳转和js对iframe进行页面跳转、刷新
js页面跳转和js对iframe进行页面跳转.刷新一.js方式的页面跳转 1.window.location.href方式 <script language="javascr ...
js 页面跳转方法当前页与新增页面
js 页面跳转方法 open('http://www.baidu.com'); //页面跳转打开一个新的页面close() //关闭当前页面location.href //可以进行页面跳转当前网页直接 ...
js页面跳转参考代码大全
整理一下JS页面跳转参考代码第一种: <script language=/"javascript/" type=/"text/javascript/&q ...
js 跳转html,js页面跳转方式 js页面跳转举例
js页面跳转,在日常的开发中,经常被用到,因为它灵活方便. 本文为大家收集了几种js页面跳转的方式,供朋友们参考. 方式1: 复制代码代码示例: window.location.href=" ...
php 中js跳转页面跳转页面,js跳转代码_PHP页面跳转 Js页面跳转代码
摘要腾兴网为您分享:PHP页面跳转 Js页面跳转代码,自动刷宝,中信金通,携程抢票,未来屋等软件知识,以及沃金汇,沃行讯通,securecrt.exe,我的世界变形金刚mod,一票通,农场小分队,手 ...
常用的JS页面跳转代码调用大全
所谓的js页面跳转就是利用javesrcipt对打开的页面ULR进行跳转,如我们打开的是A页面,通过javsrcipt脚本就会跳转到B页面. 目前很多垃圾站经常用js跳转将正常页面跳转到广告页面,当然 ...

location.hash 原生js页面跳转/路由

location.hash 原生js页面跳转/路由相关推荐

最新文章

热门文章