动态修改浏览器地址栏，并保持页面不刷新

需求：浏览器地址栏跟随输入框的变化而变化。

需求背景：客户A需要将地址和查询条件一起分享给客户B。如下图

第一种方式：vue技术栈的话，使用路由的小技巧

router.push方法中只push一个query既可以实现，但是会更新表单组件，不会更新父组件

可以在各组件的生命周期函数中观察更新效果。

去实现：

// 表单数据
data(){
    return {
        formData:{
            name:'',
            sex:''
        }
    }
}

//methods -- 路由这里我使用的vue3.0，大家要切换成vue2
handleSearch(){
    router.push({
        query:this.formData
    })
}

第二种实现方式：history.pushState()

在 HTML 文档中，history.pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态（state）。

HTML5中history提供的pushState, replaceState这两个API。它们提供了操作浏览器历史栈的方法。

pushState能够在不加载页面的情况下改变浏览器的URL。这个方法接受三个参数：

history.pushState(state, title[, url])

1、state 暂时可以忽略

2、title暂时可以忽略

3、url关键参数，将新的url替换旧的即可，注意：新网址必须与当前网址相同 origin；

4、这种方式点击查询事件，修改url时，不会更新表单组件

去实现：

    // 点击搜索事件，demo是在 vue3中的实现，大家按照思路去实现
    const handleSearch = () => {
        let str =  router.currentRoute.value.path //获取当前路由 如'/seturl'
        //将表单键值对 序列化后拼接至字符串
        for(let key in formData){
            str += `?${key}=${obj.sear_data[key]}&`
        }
        // 会话的历史实现 - 不会刷新当前组件
        str = str.substr(0,str.length-1)
        history.pushState({}, "", `#${str}`);
    }

效果如下：页面没有刷新，输入框内容还在。