个人自学前端40-杂谈-URL中#?&号，window.location对象

目录

一.#号（锚点）

代表网页中的一个位置。其右面的字符，就是该位置的标识符。浏览器读取这个URL后，会自动将print位置滚动至可视区域。
在VUE中，路由的实现方式有两种，其中一种就是通过#标识符进行页面内导航从而实现路由切换。

  1. HTTP请求不包括#
    用来指导浏览器动作的，对服务器端完全无用。
  2. .#后的字符
    在第一个#后面出现的任何字符，都会被浏览器解读为位置标识符。这意味着，这些字符都不会被发送到服务器端。
  3. 改变#不触发网页重载
    浏览器只会滚动到相应位置，不会重新加载网页。
  4. 改变#会改变浏览器的访问历史
    每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用"后退"按钮，就可以回到上一个位置。这个特性对Ajax来说特别的有用，可以通过设置不同井号值，来表示不同的访问状态，并返回不同的内容给用户。（注：在IE6和IE7下井号的改变不会增加历史记录。）
  5. 事件
    onhashchange事件：当#值发生变化时，就会触发这个事件。
    • window.onhashchange = func;
    • <body οnhashchange="func();">
    • window.addEventListener("hashchange"， func, false);
      window.location.hash：可以对URL中的井号参数进行修改

二.？号

  1. 连接作用
    通过？来带参数，连接域名和参数。
  2. 清除缓存
http://www.xx.com/index.html
http://www.xx.com/index.html?test123123

两个url打开的页面一样，但是后面这个有问号，说明不调用缓存的内容，而认为是一个新地址，重新读取。
3. 带参

http://www.xx.com/index.html?test123123='2333'

三.& 号

不同参数的间隔符

四.window.location对象

image
例：http://baidu.com:80/index.php?name=kang&when=2011#first

  1. hash
    返回：#first
    返回"#"之后的内容。
  2. host
    返回：baidu.com:80
    等于hostname + port。
  3. hostname
    返回：baidu.com
    服务器的名字。
  4. href
    返回：http://baidu.com:80/index.php?name=kang&when=2011#first
    当前页面的完整URL。
  5. origin
    返回：http://baidu.com:80/index.php
    '?'前边的URL。
  6. pathname
    返回：/index.php
    URL中主机名后的部分。
  7. port
    返回：80
    端口。
  8. protocol
    返回：http:
    协议。
  9. search
    返回：name=kang&when=2011
    第一个"?"之后的内容。
posted @ 2021-10-28 23:08  暗鸦08  阅读(165)  评论(0)    收藏  举报