vue中的锚点和查询字符串
1、什么是锚点
锚点(achor):其实就是超链接的一种。
如:普通的超链接 <a href="sub_task_detail.php">详细</a> 主要实现不同页面之间的跳转
带锚点的超链接 <a href="sub_task_detail.php#test"> </a> 可以在同一个页面的不同位置进行点位跳转
2、锚点的使用
锚点超链接一定包含井号"#",锚点超链接都在链接的尾端
例如:同一个页面的不同部分,使用锚点的情况
目标锚元素
<p id="product"> 产品</p>
锚点超链接:
<a href="#product">产品说明 </a>
这里就简单说一下,详细见超链接锚点功能
3、vue中url锚点说明
众所周知,vue项目是单页面SPA,所以需要使用锚点来进行定位,当然了,官网也给出了不使用锚点的例子,比如在vue-router中使用history模式,这样url链接中就避免了很丑的hash了。但是这样同样有缺点,就是不能再页面中使用自己设定的锚点了,同时需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。所以为了保险,还是使用锚点的方式,即带#的方式。
vue项目中,如何url中的查询字符串呢?我们一般用location.search来获取。但是其中有一种比较特殊的情况就是查询字符串和vue中的锚点同时出现,并且通过测试,发现vue自身的锚点在查询字符串之前或者在查询字符串之后都是可以正确获取页面的。比如下面的两个url都是可以正确获取页面的。
//第一种,锚点在查询字符串之前
http://www.com/sjfx/sub-task-detail#/detail/sub-detail?23355 //第二种,锚点在查询字符串之后
http://www.com/sjfx/sub-task-detail?23355#/detail/sub-detail
这两种方式都是可以正确获取到页面内容的,但是第一种方式不规范的,如果我们使用location.search获取查询字符串,返回值是空,如下图:
这是因为将查询字符串作为了锚点的一部分。
第二种方式就能正确识别查询字符串。实际上也不是特别规范,因为查询字符串都应该是以键值对的方式存在。
可能你会想到使用location.hash来获取,但是location.hash获取的是#以后的所有内容,这样对于第一种方式,查询字符串也会包含其中,对于第二种方式则,可以使用location.hash获取锚点内容(#/detail/sub-detail),使用location.search获取查询字符串(23355)。
所以对于vue单页面SPA,可以类比超链接中锚点进行学习。
4、最后复习一下window.location
比如,存在这样一个超链接
URL: http://yzl.cloud.com:3000/task.html?name=xing&jql=123#first
属性 | 含义 | 结果(值) | 备注 |
protocol: | 使用的协议 | "http:" | 还有https协议等 |
hostname: | 主机名 | “yzl.cloud.com” | 域名或者主机ip |
port: | 端口号 | “3000” | |
pathname: | 路径名,主要是url主机名后面的部分 | “/task.html” | |
search: | url中"?"之后的部分,又称为查询字符串 | “?name=xing&jql=123” | |
hash: | url中“#”之后的内容 | “#first” | 根据锚点跳转 |
host: | 主机名+端口号 | “yzl.cloud.com:3000” | |
href: | 页面完整的url |
URL: http://yzl.cloud.com:3000/task.html?name=xing&jql=123#first |
重新定位到一个url |
location的8个属性如上表所示。
为什么下面的连接我们获取的window.location.search为空呢?
如下面的url
http://192.168.163.54/#/sub-task-info-detail?firstDay=2018-01-01%2000%3A00%3A00&lastDay=2018-01-17%2023%3A59%3A59&plans=%5B%5D&passRateRange=all&passRatePromotion=all&testCount=all&autoRerunState=all&finishReason=all&version=&parentTaskName=02_GQI2017_win8%E7%BB%8F%E5%85%B8_32%E4%BD%8D&subTaskName=02_GQI2017_win8%E7%BB%8F%E5%85%B8_32%E4%BD%8D_%E9%9D%9E%E7%BB%98%E5%9B%BE_win8%E5%85%BC%E5%AE%B9%E6%80%A7_32%E4%BD%8D&subTaskId=22668&product=%E5%AE%89%E8%A3%85%E4%BA%A7%E5%93%81
这是什么原因呢?
其实是需要注意search与hash的区别的。比如下面一个简单的url
http://localhost:3000/index.html#/version?id=5&product=355
通过location.hash获取的"#/version?id=5&product=355" 本该属于search的字符串“?id=5&product=355” 属于字符串"#/version?id=5&product=355"的一部分。所以search就获取到“”了。
也就是说查询字符串search只能获取到“?”之后的并且“#”之前的内容,如果“#”之前没有“?”,那么search是获取不到内容的,只能获取到“”。
所以在vue项目中书写页面的url时还是需要注意格式的。
vue中的锚点和查询字符串的更多相关文章
- vue中的坑 --- 锚点与查询字符串
在vue中,由于是单页面SPA,所以需要使用锚点来定位,在vue的官方文档中提到过也可以不使用锚点的情况,就是在vue-router中使用history模式,这样,在url中就不会出现丑陋的#了,但是 ...
- mybatis中使用mysql的模糊查询字符串拼接(like)
方法一: <!-- 根据hid,hanme,grade,模糊查询医院信息--> 方法一: List<Hospital> getHospitalLike(@Param(" ...
- vue中input输入框的模糊查询实现
最近在使用vue写webapp在,一些感觉比较有意思的分享一下. 1:input输入框: <input class="s-search-text" placeholder=& ...
- 在vue中实现锚点定位功能
场景如下: 今天早上看到需求方新提的一个需求,这是一份网上答卷,点击题数要实现滚动到对应题目的位置: 注意点:每题题目的高度是不受控制的,你可以取到想跳转的index:(我再循环题目时做了index+ ...
- 改写URL的查询字符串QUERY_STRING(转)
查询字符串是指URL请求中“问号”后面的部分.比如,http://www.nowamagic.net/?foo=bar中粗体部分就是查询字符串,其中变量名是foo,值是bar. 1. 利用QSA转换查 ...
- Oracle数据库里面查询字符串类型的字段不为空和为空的SQL语句:
一:查询字符串类型的字段的值不为空的SQL: select * from TB_CMS_FLGTINFO_A t where (t.fsta is not null and t.fsta <&g ...
- 改写URL的查询字符串QUERY_STRING[URL重定向问号问题](转)
查询字符串是指URL请求中"问号"后面的部分.比如,http://mysite/?foo=bar 中粗体部分就是查询字符串,其中变量名是foo,值是bar. 'last|L' (最 ...
- 如何获取浏览器URL中查询字符串的参数
首先要知道Location这个对象以及这个对象中的一些属性: href:设置或返回完整的url.如本博客首页返回http://www.cnblogs.com/wymninja/ host:设置或返回主 ...
- JS获取浏览器URL中查询字符串的参数
首先要知道Location这个对象以及这个对象中的一些属性: href:设置或返回完整的url.如本博客首页返回http://www.cnblogs.com/wymninja/ host:设置或返回主 ...
随机推荐
- 微信小程序上传一或多张图片
一.要点 1.选取图片 wx.chooseImage({ sizeType: [], // original 原图,compressed 压缩图,默认二者都有 sourceType: [], // a ...
- .htaccess伪静态实例分享
首先配置服务器启动重写模块打开 Apache 的配置文件 httpd.conf .将#LoadModule rewrite_module modules/mod_rewrite前面的#去掉.保存后重启 ...
- JSP JSP(Java Server Page)是一种实现普通静态HTML和动态页面输出混合编码的技术
JSP JSP(Java Server Page)是一种实现普通静态HTML和动态页面输出混合编码的技术.从这一点来看,非常类似Microsoft ASP.PHP等技术.借助形式上的内容和外观表现的分 ...
- windows server 服务器添加免费域名证书的方法(Let's Encrypt)
在 windows server 服务器上可以通过 win-acme工具添加ssl 1.首先下载工具 https://github.com/PKISharp/win-acme/releases 最新版 ...
- hdu 2167(状压dp)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2167 思路:经典的状压dp题,前后,上下,对角8个位置不能取,状态压缩枚举即可所有情况,递推关系是为d ...
- 在ASP.NET MVC3 中利用JSONP跨域登录WEB系统
在信息系统开发的时,根据相关业务逻辑难免会多系统之间互相登录.一般情况下我们需要在多系统之间使用多个用户名和密码.这样客户就需要在多个系统之间重复登陆.每次登录都需要输入用户名和密码.最近比较流行的就 ...
- Android中的<include>标签和<merge>标签
android开发中经常会碰到某一个布局的复用:直接拷贝粘贴并不是是有效的策略,这时候就能够借助<include>标签和<merge>标签来完毕. 官方文档: http://d ...
- 怎样開始学习ADF和Jdeveroper 11g
先给一些资料能够帮助刚開始学习的人開始学习ADF和Jdeveloper11g 1.首先毫无疑问,你要懂java语言. 能够看看Thinking In Java, 或者原来sun的网上的一些文档Sun' ...
- Cannot call sendRedirect() after the response has been committed错误;
Cannot call sendRedirect() after the response has been committed提示信息其实很清楚,如果response已经提交过了,就无法再发送sen ...
- SQL Server数据库实例名与服务器名不一致的解决办法
SQL Server数据库实例名与服务器名不一致的解决办法 --EXEC sp_addlinkedserver -- @server = 'PSHGQ' --GO --select * from ...