为什么要用location的hash来传递参数?

Posted 2021-03-24 unrecognized

分页功能代码实现

<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()
        }
    }
}