JS页面跳转和传参的方法小结

       好多前端项目都需要用到页面跳转，并且涉及到参数的传递，运用不同框架时，使用的方法也不同，下面总结几个用过的页面跳转方式。

  1、原生JS

在一个电商平台的项目中，有两处需要跳转页面（1）点击商品图标，跳转到商品的详细信息页面，其实和淘宝的主页是一样的

html代码如下

     
 
 
 
从href属性可以看出，采用地址上键值对的方式，改变跳转的目标页面，‘id’是每个商品在数据库对应的唯一编号，商品详细信息页面‘detail.jsp’的js文件通过解析location对象来找到商品的id，解析代码如下
 
 
$.extend({'getParam':function(key){
 
 
   var reg = new RegExp("(^|&)"+key+"=([^&]*)(&|$)");
 
 
   var r = window.location.search.substr(1).match(reg);
 
 
   var reg1=new RegExp("\\d+$")
 
 
   var x=r[2].match(reg1);
 
 
return {who:r[2],index:x};
 
 
})
 
 
（在正则表达式中加入变量，只能采用创建RegExp的方式；location对象的search属性对应于？后面的字符串，包括？；match是字符串对象包装的匹配方法，在有值时返回一个数组array，使用格式：“字符串.match（正则对象）”）。
 
 
（2）点击条件，列表筛选出符合的商品
 
 
 
  
 
   
 
     
   
 
  
 
  
 
 
 
 
var _tara=$(this).attr('data-type');
 
 
var tara=$(this).attr('href');
 
 
$(this).attr('href',tara+'&type='+_tara);
 
 
选择‘口味’、‘人数’之后，会跳转至一个新的页面，此时获取当前地址，解析出type（口味），p（人数），遍历data-type，data-p与之匹配的dom元素，更改其href属性。
 
 
  2、AngularJs
 
 
AngularJs中采用$stateProvider，在config中先配置state参数
 
 
app1.config(['$stateProvider',function($stateProvider){
 
 
    $stateProvider.state('stateOne',{
 
 
                    url:'/pageOne',
 
 
                    templateUrl:'tempOne?id'
 
 
                    })
 
 
}])  
 
 
 
 
在标签中用‘ui-sref=“stateOne（{id=1}）”’取代href，或者直接在controller的方法中添加$state.go（‘stateOne’,{id=1}），此时用Angular框架传参显得十分方便。