在实现该操作之前首先要清楚，当前的url是哪种模式：a:history b:hash 模式。模式不同对应的操作不同。
a:history 模式
方法： window.history.replaceState(state,title,url) 还有一个 window.history.pushState(state,title,url)
两者都是html5的新特性，支持IE10以上，都有三个参数：两者的区别：pushState()是在history栈中新建一个历史记录，而replaceState()是替换当前记录；（一般情况下使用）
（1）state：存储JSON字符串，可以用在popstate事件中。可以设置为null
（2）title：现在大多数浏览器不支持或者忽略这个参数，最好用null代替。
（3）url：任意有效的URL，用于更新浏览器的地址栏，并不在乎URL是否已经存在地址列表中。更重要的是，它不会重新加载页面。
***** window.history.replaceState(null, null, redirectUrl) redirectUrl定向地址 *****
b: hash 模式
方法：window.location.hash 这个属性可读可写。读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录。
另外一个方法可以利用history 模式中的window.history.replaceState(null, null, redirectUr)进行定向替换
***以下是针对vue项目中hash模式下进行不刷新代码部分***
<template>
<div class=""></div>
</template>
<script>
import store from '@/common/store'
export default {
// import引入的组件需要注入到对象中才能使用
name: 'CommonMinix',
components: {},
data() {
// 这里存放数据
return {}
},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
this.handerUrl()
},
beforeCreate() {}, // 生命周期 - 创建之前
beforeMount() {}, // 生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 - 更新之后
beforeDestroy() {}, // 生命周期 - 销毁之前
destroyed() {
// 生命周期 - 销毁完成后将数据清除
localStorage.setItem("delLocationHash", ``);
}, // 生命周期 - 销毁完成
activated() {},
// 方法集合
methods: {
handerUrl() {
// locationHash为对象
const hashUrlObjList = localStorage.getItem(' locationHash ')
const Path = `#${this.$route.path}`
/**
* 判断url中是否携带参数
* 例如：#/webflow/pages/draft/5656
*/
const Draft = '#/sd-webflow/pages/draft'
const isDraftParamsUrl = Path.indexOf(`${Draft}`) > -1
if (isDoneParamsUrl && !hashUrlObjList[`${Draft}`]) {
localStorage.setItem("isDraftParamsUrl", ` location.hash `);
} else if (!hashUrlObjList[Path] && !isDraftParamsUrl) {
localStorage.setItem("path", ` location.hash `);
} else {
hashChange()
}
// 将 hashChange挂载给window事件上
window.onhashchange = hashChange
function hashChange(e) {
const redirectUrl = hashUrlObjList[isDraftParamsUrl ? Draft : Path]
window.history.replaceState(null, null, redirectUrl)
}
},
}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped></style>
