Vue获取url路径

本是古典何须时尚 2022-11-18 04:36 429阅读 0赞

## Vue中获取url路径 ##

需要使用window.location.\[options\]

我们先弹出看一下window.location会显示什么？

alert(window.location);

![在这里插入图片描述][2021041214020239.png]  
/sys-user为当前vue的路径  
![在这里插入图片描述][20210412140302524.png]  
options属性有如下

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>hash</td> 
   <td>从#号开始的RUL</td> 
  </tr> 
  <tr> 
   <td>host</td> 
   <td>主机名和当前URL的端口</td> 
  </tr> 
  <tr> 
   <td>hostname</td> 
   <td>当前URL的主机名</td> 
  </tr> 
  <tr> 
   <td>herf</td> 
   <td>完整的URL</td> 
  </tr> 
  <tr> 
   <td>pathname</td> 
   <td>当前URL的路径部分</td> 
  </tr> 
  <tr> 
   <td>port</td> 
   <td>当前URL的端口</td> 
  </tr> 
  <tr> 
   <td>protocol</td> 
   <td>当前URL协议</td> 
  </tr> 
  <tr> 
   <td>search</td> 
   <td>从问好（?)开始的URL（查询部分）</td> 
  </tr> 
 </tbody> 
</table>

alert(window.location.hash)

![在这里插入图片描述][20210412141134331.png]

alert(window.location.host);

![在这里插入图片描述][20210412141245812.png]

alert(window.location.hostname);

![在这里插入图片描述][20210412141333118.png]

alert(window.location.href);

![在这里插入图片描述][2021041214141568.png]

alert(window.location.pathname);

![在这里插入图片描述][20210412141457101.png]

alert(window.location.port);

![在这里插入图片描述][20210412141528532.png]

alert(window.location.protocol);

![在这里插入图片描述][20210412141600705.png]

alert(window.location.search);

比如: http://localhost:8080/\#/test?limitUserName=test&grade=0 像这种路径,取到的就是空值

因为查询字符串search只能在取到“？”后面和“\#”之前的内容，如果“\#”之前没有“？”search取值为空。

[2021041214020239.png]: /images/20221022/18ef0b78555a482a8a2a268ff28526a0.png
[20210412140302524.png]: /images/20221022/54655c98987d47218573207facc04f6c.png
[20210412141134331.png]: /images/20221022/2a72ea8bfa7c4071ab33eb8a9753280c.png
[20210412141245812.png]: /images/20221022/f3e5229d30a24fcf8d4fc40eedd58224.png
[20210412141333118.png]: /images/20221022/def6d589f17b4ea18a9c13025a6b8cb8.png
[2021041214141568.png]: /images/20221022/74c772f426c2406da3e4dd37f5061e3b.png
[20210412141457101.png]: /images/20221022/1f99d2f97d5f4f47b950d9ec8023e21c.png
[20210412141528532.png]: /images/20221022/891cf741e1d944ce9bf024b455330c48.png
[20210412141600705.png]: /images/20221022/09b09f9b999b4449b1d87550089245ed.png