Vue路由参数更新但是页面不刷新问题

解决方法

一、使用watch属性监听route对象

watch: {
    $route(to, from) {
      if (this.$route.query.id && from.path == "/client/index") {
        this.getAllTypeList();
    },
      // 对路由变化作出响应...
      //可以使用$router.go(0)进行刷新,(补充,该方法在ios手机上无效)
      //可以改用window.location.reload()
    }

二、设置router-view中的key属性,附带上参数值

<router-view :key="$route.name + ($route.params.id || '')">router-view>

三、使用beforeRouteUpdate 导航守卫

// 全局导航守卫
router.beforeEach((to, from, next) => {
  if (to.name === from.name && to.params.type !== from.params.type) {
    next({name: 'empty', query: {toPath: to.fullPath}})
  } else {
    next()
  }
})
 
// 中间过渡路由
let toPath = this.$route.query.toPath
if (this.toPath) {
  this.$router.push({path: this.toPath})
}

Vue路由参数更新但是页面不刷新问题_第1张图片

你可能感兴趣的:(Vue,vue.js)