欢迎使用CSDN-markdown编辑器

来源:互联网 发布:魔镜软件哪个好 编辑:程序博客网 时间:2024/06/10 14:19

以下获取与修改的 URL 以  ( http://172.16.0.88:8100/#/homePage?id=10&a=100  ) 为例

【一】获取 (不修改URL)

[javascript] view plain copy
print?
  1. //1.获取当前完整的url路径  
  2. var absurl = location.absUrl();&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="comment">//http://172.16.0.88:8100/#/homePage?id=10&amp;a=100</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span><span class="comment">//2.&nbsp;获取当前url路径(当前url#后面的内容,包括参数和哈希值):</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;<span class="keyword">var</span><span>&nbsp;url&nbsp;=&nbsp;location.url();  
  3.  // 结果:/homePage?id=10&a=100  
  4.    
  5.   
  6.  //3. 获取当前url的子路径(也就是当前url#后面的内容,不包括参数)  
  7. var pathUrl = location.path()&nbsp;&nbsp;</span></span></li><li class=""><span><span class="comment">//结果:/homePage</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span><span class="comment">//4.获取当前url的协议(比如http,https)</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="keyword">var</span><span>&nbsp;protocol&nbsp;=&nbsp;location.protocol();  
  8. //结果:http  
  9.   
  10.   
  11. //5.获取主机名  
  12. var localhost = location.host();&nbsp;&nbsp;</span></span></li><li class=""><span><span class="comment">//结果:172.16.0.88</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span><span class="comment">//6.获取当前url的端口</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="keyword">var</span><span>&nbsp;port&nbsp;=&nbsp;location.port();  
  13. //结果:8100  
  14.   
  15.   
  16. //7.获取当前url的哈希值  
  17. var hash = location.hash()&nbsp;&nbsp;</span></span></li><li class=""><span><span class="comment">//结果:http://172.16.088</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;<span class="comment">//8.获取当前url的参数的序列化json对象</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;<span class="keyword">var</span><span>&nbsp;search&nbsp;=&nbsp;location.search();  
  18.  //结果:{id: “10”, a: “100”}  
       //1.获取当前完整的url路径       var absurl = $location.absUrl();       //http://172.16.0.88:8100/#/homePage?id=10&a=100       //2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值):        var url = $location.url();        // 结果:/homePage?id=10&a=100        //3. 获取当前url的子路径(也就是当前url#后面的内容,不包括参数)       var pathUrl = $location.path()       //结果:/homePage       //4.获取当前url的协议(比如http,https)       var protocol = $location.protocol();       //结果:http       //5.获取主机名       var localhost = $location.host();       //结果:172.16.0.88       //6.获取当前url的端口       var port = $location.port();       //结果:8100       //7.获取当前url的哈希值       var hash = $location.hash()       //结果:http://172.16.088        //8.获取当前url的参数的序列化json对象        var search = $location.search();        //结果:{id: "10", a: "100"}

【二】修改 (改变URL相关内容)

[javascript] view plain copy
print?
  1. //1 修改url的子路径部分(也就是当前url#后面的内容,不包括参数):  
  2.  location.url(<span class="string">'/validation'</span><span>);&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="comment">//结果:http://172.16.0.88:8100/#/validation</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;<span class="comment">//2&nbsp;修改url的哈希值部分</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>location.hash(’myhash3’);  
  3. //结果:http://172.16.0.88:8100/#/homePage?id=10&a=100#myhash3  
  4.   
  5. //3 修改url的参数部分(第一个参数表示url参数的属性名,第二个参数是该属性名的属性值,如果是已有属性名,则修改,如果不是已有属性,则新增)  
  6. location.search(<span class="string">'id'</span><span>,</span><span class="string">'111'</span><span>)&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="comment">//&nbsp;结果(修改参数值):http://172.16.0.88:8100/#/homePage?id=111&amp;a=100</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span>location.search(’ids’,‘111’)  
  7. // 结果(新增ids参数): http://172.16.0.88:8100/#/homePage?id=111&a=100&ids=111  
  8.   
  9. //4.一次性修改多个参数  
  10. location.search({id:<span class="string">'55'</span><span>,</span><span class="string">'a'</span><span>:</span><span class="string">'66'</span><span>})&nbsp;&nbsp;</span></span></li><li class=""><span><span class="comment">//结果:http://172.16.0.88:8100/#/homePage?id=55&amp;a=66#myhash3</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;<span class="comment">//5.第一个值表示url参数的属性名,如果是已有属性名,则删除该属性,如果不是已有属性,那就等于没改过</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;location.search(’age’,null)  
        //1 修改url的子路径部分(也就是当前url#后面的内容,不包括参数):         $location.url('/validation');        //结果:http://172.16.0.88:8100/#/validation         //2 修改url的哈希值部分        $location.hash('myhash3');        //结果:http://172.16.0.88:8100/#/homePage?id=10&a=100#myhash3        //3 修改url的参数部分(第一个参数表示url参数的属性名,第二个参数是该属性名的属性值,如果是已有属性名,则修改,如果不是已有属性,则新增)        $location.search('id','111')        // 结果(修改参数值):http://172.16.0.88:8100/#/homePage?id=111&a=100        $location.search('ids','111')        // 结果(新增ids参数): http://172.16.0.88:8100/#/homePage?id=111&a=100&ids=111        //4.一次性修改多个参数        $location.search({id:'55','a':'66'})        //结果:http://172.16.0.88:8100/#/homePage?id=55&a=66#myhash3         //5.第一个值表示url参数的属性名,如果是已有属性名,则删除该属性,如果不是已有属性,那就等于没改过         $location.search('age',null)


【三】修改URL但不存入历史记录
            

           在上面的修改url的方法的时候,每修改一次,url都会被存入历史记录,可以使用后退按钮回到修改前的url,如果不想要这种效果,而仅仅是替换当前的记录,可以使用  $location.path(‘/validation’).replace();