Vue跳转到某页面的时候,刷新该页面

前言

因为蘑菇博客评论插件使用的是搜狐畅言,所以每次首次加载的时候,就能正常显示评论插件,然后点击一些页面在返回后,发现插件就无法正常启动了,考虑到可能是因为vue页面缓存的原因,当时使用了v-if 判断加载

但是效果和之前一样,后面考虑到可以当我们跳转到/about页面的时候,也就是带有畅言的界面时,进行刷新操作,下面进入正题

首先我们需要在 router.js页面配置对应的路由守卫,为了避免无限刷新,我们需要引入一个标志位,当我们的去 /about页面的时候,我们不做操作,标志位是本身,当我们离开/about页面的时候,我们让标志位 +1

router.beforeEach((to, from, next) => {
  var reloaded = window.localStorage.getItem('reloaded') || '0'
  if (to.path === '/about') {        
    window.localStorage.setItem('reloaded', reloaded)
  } else if (from.path === '/about') {
    var count = Number(reloaded) + 1
    window.localStorage.setItem('reloaded', count)
  }
  next()
})

在对应的about.vue页面中,当我们进入/about页面的时候,首先判断标志位是不是2的倍数,如果是,那么刷新,让标志位 +1 , 当我们离开的时候,根据刚刚设置的路由,又会使得标志位加1,变成2的倍数,所以下次进入该页面的时候,又能够刷新页面了~

created() {    
 var reloaded = window.localStorage.getItem('reloaded') || '0'
 if (reloaded % 2 == 0 ) {
  window.location.reload()
  window.localStorage.setItem('reloaded',  + 1)
 }
},