通过js获得当前页面路由参数，是一个常用的方法，即使是静态的html页面，也可以借此获得传来的参数，达到动态页面一般的效果。

window.location

我们需要用到的就是window.location的几个属性，下面从这个简单的测试代码中可以看到详细的用法：

建立一个htm文件，先设置一个全局样式，为的是清晰地显示文字

<style>body{ background-color: #111; color:#0c0; font-family: 'Courier New'; font-size: 36px;}</style>

下面是js代码部分

<script>a="<pre>";//获取完整的 URL。a+="\n href = "+ window.location.href;//获取 URL 的协议类型。a+="\nprotocol = "+ window.location.protocol;//获取 网址:端口号。a+="\n host = "+ window.location.host;//获取/开头的带路径的文件名。a+="\npathname = "+ window.location.pathname;//获取文件名问号后面的部分（含问号）a+="\n search = "+ window.location.search;//获取 URL 最后#号后的部分（含#号）a+="\n hash = "+ window.location.hash;//获取 URL 的端口号。a+="\n port = "+ window.location.port;a+="\n</pre>";//把上面的结果显示出来document.write(a);</script>

保存代码到一个页面比如1.htm，我们需要在本地启动一个模拟的web服务器，比如使用vscode的GoLive插件，在本例中，它启用的默认web地址是 ，在其对应的根目录下建立js目录，1.htm放在其中，然后我访问类似这样的地址即可看到页面：

这是一个普通的静态页面地址，我们可以带上一些参数，形成这样的地址：

;do=ok#first

这是个比较完整的url，他带有了协议，端口，路径，参数，还有锚点，已经可以满足所有动态页面的应用，我们得到这个结果：

我们可以看到，所有的参数都被解析出来了！

注：当然你也可以直接打开浏览器访问页面1.htm，而无需启动模拟的web服务器。显示的协议是file://开头的。但是路径编码后会比较长不方便看，仅此而已。

总结一下：

window.location.href

获取完整的 URL：

;do=ok#first

window.location.protocol

获取 URL 的协议类型：

http:

window.location.host

获取网址和端口号：

127.0.0.1:5500

window.location.pathname

获取/开头的带路径的文件名：

/js/1.htm

window.location.search

获取文件名问号后面的部分（含问号）

?id=7&do=ok

window.location.hash

获取 URL 最后#号后的部分（含#号）

#first

window.location.port

获取 URL 的端口号。

5500

以上就是js所能获得的url参数了。方法简单而用法无穷：

我们可以通过获取这些属性，来判断页面状态，做出相应的动作或者交互响应。

我们也可以通过写入新的数据而使这些属性发生改变，此时页面就会跳转到新的url页面去了！