Vue监控路由与路由参数, 刷新当前页面数据的方法汇总

<template>
  <div>
    <!-- 显示监控的路由信息 -->
    <div>{{ monitoredRoute }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      monitoredRoute: null, // 用于存储监控的路由信息
    };
  },
  watch: {
    '$route'(newRoute) {
      this.monitoredRoute = newRoute; // 将新的路由信息保存到组件的monitoredRoute属性中
      // 执行其他操作或调用其他方法
    },
    //或
    $route(newRoute) {
      this.monitoredRoute = newRoute; // 将新的路由信息保存到组件的monitoredRoute属性中
      // 执行其他操作或调用其他方法
    },
  },
};
</script>

<template>
  <div>
    <!-- 显示监控的参数值 -->
    <div>{{ monitoredParam }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      monitoredParam: null, // 用于存储监控的参数值
    };
  },
  watch: {
    '$route.params.monitoredParam'(newValue) {
      this.monitoredParam = newValue; // 将新的参数值保存到组件的monitoredParam属性中
      // 执行其他操作或调用其他方法
    },
  },
};
</script>

<template>
  <div>
    <!-- 显示监控的路由信息 -->
    <div>{{ monitoredRoute }}</div>
    <!-- 显示监控的参数值 -->
    <div>{{ monitoredParam }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      monitoredRoute: null, // 用于存储监控的路由信息
      monitoredParam: null, // 用于存储监控的参数值
    };
  },
  watch: {
    '$route'(newRoute) {
      this.monitoredRoute = newRoute; // 将新的路由信息保存到组件的monitoredRoute属性中
      // 执行其他操作或调用其他方法
    },
    '$route.params.monitoredParam'(newValue) {
      this.monitoredParam = newValue; // 将新的参数值保存到组件的monitoredParam属性中
      // 执行其他操作或调用其他方法
    },
  },
};
</script>

methods: {
  reloadPage() {
    location.reload();
  }
}

<button @click="reloadPage">重新加载页面</button>

methods: {
  goForward() {
    this.$router.go(1);
  },
  goBack() {
    this.$router.go(-1);
  }
}

<button @click="goForward">前进</button>
<button @click="goBack">后退</button>

const resolvedRoute = this.$router.resolve('/example-route');
resolvedRoute.then(route => {
   // 处理解析后的路由信息
});

// 导航到指定路由路径
this.$router.push('/example-route');
// 导航到带参数的路由
this.$router.push({ path: '/example-route', query: { id: 1 } });

//页面类型变化直接
'$route.query.type'(newValue) {
	this.$router.push("/xx/yy_detail?type=0&id=" + row.id);
}
//相同页面相同数据但需要重新渲染(条件结合具体情况)
'$route.query.xx'(newValue) {
  this.$router.go(0);
}
//相同页面不同数据
'$route'(newValue) {
  this.init();
},
methods: {
    init(){
      this.detail();
      this.$refs["ppData"].flush(this.$route.query.id);
      this.$refs["fileData"].flush(this.$route.query.id);
      this.$refs["child3"].flush(this.$route.query.id);
      this.$refs["child4"].flush(this.$route.query.id);
      this.$refs["child5"].flush(this.$route.query.id);
      this.$refs["child6"].flush(this.$route.query.id);
    },
},