为什么要用location的hash来传递参数?
2024-10-08 22:07:00
分页功能代码实现
<div>
<a class="btn" href="#" style="..." @Click.prevent="prePage"><</a>
<a class="btn" href="#" style="..." @Click.prevent="nextPage">$gt;</a>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#searchApp",
data: {
searchData: {
key: "",
page: 1
},
total: 1,
totalPage: 1
},
created() {
// 发送请求之前给searchData赋值
const key = http.getUrlParam("key")
if (!key) {
alert("请添加搜索条件")
}
this.searchData.key = key
const page = http.getUrlParam("page") || 1
this.searchData.page = page
this.loadItemData()
},
watch: {
// 监听searchData.page属性
"searchData.page": {
handler(){
this.loadItemData()
}
}
},
methods: {
// 发送请求
loadItemData() {
...
},
// 上一页
prePage(){
if (this.searchData.page > 1){
this.searchData.page--
}
},
// 下一页
nextPage(){
if (this.searchData.page <= this.totalPage){
this.searchData.page++
}
}
}
});
</script>
刷新问题
上面的方法按照正常的get传参方式看似正常
此时的地址栏状态如下,点击上一页或下一页时,页面会一直刷新导致浏览器崩溃
http://localhost/?key=XXX&page=XXX
watch监听到page有变化之后刷新页面导致page重新赋值,进入死循环
const page = http.getUrlParam("page") || 1
刷新问题解决
created(){
const key = http.getUrlParam("key")
if(!key){
alert("请求添加搜索条件！！！")
}
//获取到location中的hash,0位为"#",不保留
const hashStr = location.hash.substring(1)
//将字符串格式的hash转成json格式[包含了key之外所有的参数]
const hashJson = http.parse(hashStr)
//将key加入到hashJson中
hashJson.key = key;
//判断page值，没有就赋值为1
hashJson.page = hashJson.page || 1
//将包含所有参数的json格式的hash赋值给当前searchData
this.searchData = hashJson;
//向服务区发送分页查询请求
this.loadItemData()
},
watch: {
"searchData.page": {
handler(){
//location的hash改变是不会再次发送请求的
//所以我们最终采取的方案是，将除了key之外的所有请求参数都放到hash中去。
//具体操作如下：
//将searchData中的数据把key去掉
const {key, ...searchDataWithOutKey} = this.searchData
//将json格式的searchDataWithOutKey转成字符串赋值给hash
location.hash = http.stringify(searchDataWithOutKey)
//向服务区发送分页查询请求
this.loadItemData()
}
}
}
最新文章
- JUC.Lock(锁机制)学习笔记[附详细源码解析]
- .net中的 InitializeComponent方法
- ICTCLAS中文分词库的使用
- Beta版本冲刺Day4
- Given an array where elements are sorted in ascending order, convert it to a height balanced BST.
- IOS UTF8中文字母数字 组合时长度截取
- Web开发知识点总结
- Android 的开源电话/通讯/IM聊天项目全集
- （转载）Windows下手动完全卸载Oracle
- html页面不使用缓存的代码
- WEB渗透测试之漏扫神器
- ssm日期格式转换
- 用 jupyter notebook 打开 oui.txt 文件出现的问题及解决方案
- jQuery+php+Ajax文章列表点击加载更多功能
- ActiveMq Windows 配置优化
- .Net拾忆：从List去除重复-拾忆集合
- 阿里八八Alpha阶段Scrum(7/12)
- 字符串(string.cpp)
- python 解析top文件格式
- NetBpm 示例：请假审批(6)