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

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

  1、原生JS

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

html代码如下

<a href='detail.jsp?id=com<%=x%>'>

    <img src='img/cake<%=x%>'

</a>

从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框架传参显得十分方便。