zoukankan      html  css  js  c++  java
  • 为什么要用location的hash来传递参数?

    分页功能代码实现

    <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()
            }
        }
    }
    
  • 相关阅读:
    2009年放假时间安排
    省钱方便网上手机充话费
    为啥不能嵌入html?
    超出套餐流量的GPRS流量费竟然要贵100倍!怎么没有人管呢!这个价格怎么定的呢!
    2008汶川加油!2008中国加油!!
    thinkpad X200 破音特别厉害!郁闷啊!千万不要买水货!
    送走2008,迎接新的2009!
    "上海启明星电子商务有限公司"偷偷扣你的电话钱
    从公司到凯虹
    供应二级新疆细绒棉150吨
  • 原文地址:https://www.cnblogs.com/unrecognized/p/11745263.html
Copyright © 2011-2022 走看看