vue 同一个页面第二次跳转路由不刷新问题

Posted 2023-05-04

参考技术A vue在第二次跳转同一路由跳转数据不更新，

使用router-view时，如果在相同路由之间跳转，默认在跳转路由时会采用缓存策略,并不会刷新当前路由组件。即mounted,beforeDestory等钩子函数并不会触发。vue 同一路由跳转不走生命周期，导致数据不更新。

使用watch 监听路由变化。手动更新数据。

使用 <router-view :key="$route.fullPath"/>

把你mounted() 里面执行的办法在 activated() 里面在执行一遍，完美解决。

router二次跳转不刷新的问题

router路由页面二次跳转不刷新数据的问题，已经带参了二次请求的时候

本来打算在count页面带参跳转到device
count页面按钮  <el-button size="mini" type="text" icon="el-icon-tickets" @click="handleDetail(scope.row)"  v-hasPermi="['lock:device:detail']">
主要是一个@click方法

/**  查看详情 */
    handleDetail(row) {
      let sn = row.sn
      this.$router.push(
        {path:'/device/device/',
          query:{sn: sn}
        },
        );
    },

watch: {
    '$route' (to, from) {
      this.$router.go(0);
    }
  },
  这个watch是为了防止第二次页面跳转的时候不刷新，已经带参数了却刷新，如果你手动F5刷新页面再跳转又会刷新了，
  使用watch避免二次跳转不刷新问题

接受跳转的页面写

created方法下写
watch: {
    '$route' (to, from) {
      this.$router.go(0);
    }
  },

methods方法下写
// 取到路由带过来的参数
        const routerParams = this.$route.query.sn
        // 将数据放在当前组件的数据内
        this.queryParams.sn = routerParams;
        this.handleQuery();
        this.reset();
        this.resetQuery();
        this.getList();