博客

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

需求背景：客户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}`);
    }

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