vue中的坑 --- 锚点与查询字符

Posted 2020-09-22 Wayne Zhu

 

     在vue中，由于是单页面SPA，所以需要使用锚点来定位，在vue的官方文档中提到过也可以不使用锚点的情况，就是在vue-router中使用history模式，这样，在url中就不会出现丑陋的#了，但是这样的缺点在于不能再页面中再使用自己设定的锚点（利用href、name或id）并且需要后台的支持，所以一般我们使用带#的形式就可以了。 

　　而在这之中一种比较特殊的情况在于，如果查询字符串和vue中的锚点同时出现，那么他们的位置关系是怎样的问题， 通过测试可以发现，vue自身的锚点在查询字符串之前或者在查询字符串之后都是可以正确的获取页面的。最近的一个小项目就是这样的，即在微信授权登陆完成之后，后台返回一个url，这个url会附带一个带有用户id的查询字符串，如果我们希望获得查询字符串，就是使用 window.location.search 了。

　　比如下面两种url：

// 第一种
http://www.ou.cn/wechat2/index.html#/commodity/payment?49973067

// 第二种
http://www.ou.cn/wechat2/index.html?49973067#/commodity/payment

　　这两种方式都是可以获取到内容的。 

　　但是，第一种方式是不规范的，因为我们在使用 location.search 获取查询字符串的时候，内容为空，即将之作为了锚点的一部分。 但是使用第二种方式是更为规范的，这种方式可以准确识别查询字符串。

　　即对于第一种，我们使用location.hash获取到的是#以及后面所有的内容，而第二种就可以通过 location.hash 获取到锚点部分， 通过 location.search 获取到查询字符串。