vue hash模式下路由改变页面不刷新问题

//js原始方法刷新，相当于按F5刷新页面，会有短暂的白屏，相当于页面的重新载入//js原始方法刷新，相当于按F5刷新页面，会有短暂的白屏，相当于页面的重新载入

hash模式下路由改变页面不刷新问题

在App.vue文件中添加：

export default {
  mounted () {
    // 检测浏览器路由改变页面不刷新问题,hash模式的工作原理是hashchange事件
    window.addEventListener('hashchange', () => {
      console.log(window.location.hash,'window.location.hash')
      let currentPath = window.location.hash.slice(1)
      console.log(currentPath,'currentPath')
      if (this.$route.path !== currentPath) {
        this.$router.push(currentPath)
      }
    }, false)
  },
}

---

vue页面刷新的6种方式

1、this.$forceUpdate()  //强制渲染页面

2、window.location.reload() //js原始方法刷新，相当于按F5刷新页面，会有短暂的白屏，相当于页面的重新载入
 3、this.$router.go(0)   //Vue自带的路由进行跳转，相当于按F5刷新页面，会有短暂的白屏，相当于页面的重新载入

4、通过inject

<template>
  <div>
      <div class="header">
          <button @click="update()">刷新页面</button>
      </div>
  </div>
</template>

<script>
export default {
data(){
  return{

  }
},
inject:[
  'reload'
],
methods:{
  update(){
    this.reload()
    console.log('刷新页面')
  }
}
}
</script>

4、通过路由跳转的方法刷新，具体思路是点击按钮跳转一个空白页，然后再马上跳回来

5、控制<router-view></router-view>的显示与否，在全局组件注册一个方法，该方法控制router-view的显示与否，在子组件调用即可：

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  provide() { // 注册一个方法
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
        console.log('reload')
      })
    }
  }
}
</script>