vue路由跳转强制刷新

Vue框架自带router路由跳转功能，实现了前端路由的实现。在实际开发中，有时候需要强制刷新页面，以便对页面内容进行更新。Vue提供了两种方式实现路由跳转强制刷新：

1. 通过路由参数添加一个随机数，在路由切换时强制刷新。

在路由对象的meta属性中添加一个随机数，每次切换路由时，强制重新加载页面，代码如下：

{
  path: '/home',
  name: 'Home',
  component: Home,
  meta: {
    requireAuth: true,
    refresh: true // 添加一个随机数，强制刷新页面
  }
}

然后在路由切换钩子函数beforeEach中，判断meta中是否有refresh属性，如果有就重新生成一个路由地址，如下：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireAuth)) {
    if (store.getters.token) {
      if(to.meta.refresh) { // 判断是否刷新页面
        to.path += '?refresh=' + Math.random() // 重新生成一个路由地址
      }
      next()
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  } else {
    next()
  }
})

2. 在跳转页面前手动执行window.location.reload()方法，强制刷新页面。

在vue-router路由中，通过执行window.location.reload()方法，实现页面的强制更新，代码如下：

this.$router.push('/home').catch(err => {})
window.location.reload()

以上两种方式可以实现Vue路由的强制刷新，根据实际需要选择使用。注意在使用强制刷新时，需要对页面数据进行重新加载和处理，避免出现数据的错误和不一致。