【Vue】监控路由与路由参数, 刷新当前页面数据的几种方法

目录

一、Vue监控路由

1、Vue中watch监控路由

2、Vue中watch监控路由的某一个参数

3、Vue中watch同时监控多个路由

二、刷新当前页面数据

1、location.reload

2、$router.go(0)

3、this.$router.resolve()与this.$router.resolve()

a、this.$router.resolve()

b、this.$router.push()

三、示例场景

四、往期相关优质推荐


Vue官网 Element官网

一、Vue监控路由

1、Vue中watch监控路由

        如果你想要监控整个路由对象的变化,包括路由路径、参数、查询参数等的变化,可以使用`$route`对象进行监控。以下是一个使用`watch`监控整个路由对象的示例:

<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>

在这个示例中,我们在组件的`data`选项中定义了一个`monitoredRoute`属性,用于存储监控的路由信息。在`watch`选项中,使用`'$route'`来指定要监控的路由对象。当路由发生变化时,`watch`函数会被触发,将新的路由信息保存到组件的`monitoredRoute`属性中。

你可以根据需要在`watch`函数中执行其他操作或调用其他方法,例如根据路由信息更新组件的状态、重新加载数据等。

请注意,上述示例中的`monitoredRoute`是一个示例属性名,你可以根据需要将其替换为你自己定义的属性名。

2、Vue中watch监控路由的某一个参数

在Vue中,可以使用`watch`选项来监控路由的某一个参数的变化。以下是一个使用`watch`监控路由参数的示例:

<template>
  <div>
    <!-- 显示监控的参数值 -->
    <div>{{ monitoredParam }}</div>
  </div>
</template>

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

在这个示例中,我们在组件的`data`选项中定义了一个`monitoredParam`属性,用于存储监控的参数值。在`watch`选项中,使用`'$route.params.monitoredParam'`来指定要监控的路由参数。当监控的参数发生变化时,`watch`函数会被触发,将新的参数值保存到组件的`monitoredParam`属性中。

你可以根据需要在`watch`函数中执行其他操作或调用其他方法,例如根据参数值更新组件的状态、重新加载数据等。

请注意,上述示例中的`monitoredParam`是一个示例参数名,你需要将其替换为你要监控的实际参数名。另外,如果你还需要监控其他路由参数,可以在`watch`选项中添加相应的监控函数。

3、Vue中watch同时监控多个路由

<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>

二、刷新当前页面数据

1、location.reload

在Vue.js中,可以使用`location.reload()`方法重新加载当前页面。这个方法会导致浏览器重新发送请求并重新加载页面。

要在Vue组件中使用`location.reload()`,可以在需要重新加载页面的地方调用该方法。例如,在一个按钮的点击事件处理程序中:

javascript">methods: {
  reloadPage() {
    location.reload();
  }
}

然后,在模板中使用这个方法:

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

当用户点击按钮时,页面将会重新加载。

需要注意的是,`location.reload()`方法会导致页面完全重新加载,包括重新执行Vue实例的生命周期钩子函数。这可能会导致数据丢失,因为重新加载后,Vue实例将会被重置。

如果你只是想重新加载某个组件或重新获取数据,而不是整个页面,你可以考虑使用Vue的其他方法,如重新发起异步请求或重新设置组件的数据。

2、$router.go(0)

        在Vue.js中,可以使用`$router.go()`方法进行路由导航。该方法用于在路由之间进行前进或后退操作。`$router.go()`方法接受一个整数作为参数,表示前进或后退的步数。正数表示前进,负数表示后退。

下面是`$router.go()`方法的使用方法示例:

序号 代码 释义
1 this.$router.go(-1);   // 后退+刷新;
2 this.$router.go(0);    // 刷新;
3 this.$router.go(1);    // 前进一步
4 this.$router.go(2);    // 前进两步
5 this.$router.go(n);    // 前进n个页面

你可以在Vue组件的方法中使用`$router.go()`方法来触发路由导航。例如,在一个按钮的点击事件处理程序中:

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

然后,在模板中使用这些方法:

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

当用户点击"前进"按钮时,将向前导航一步。当用户点击"后退"按钮时,将后退一步。

需要注意的是,`$router.go()`方法只能在使用Vue Router进行路由管理的应用程序中使用。如果你的应用程序没有配置Vue Router,或者当前路由没有前进或后退的历史记录,`$router.go()`方法可能不会产生任何效果。

3、this.$router.resolve()与this.$router.resolve()

        `this.$router.resolve()`和`this.$router.push()`是Vue Router中的两个不同的方法,用于处理路由相关的操作,但它们有不同的作用和使用方式。

a、this.$router.resolve()

  • 作用:用于解析路由的相关信息,而不进行实际的导航操作。
  • 使用方式:接受一个路由路径作为参数,并返回一个Promise对象,该Promise对象包含解析后的路由信息。
  •  示例:
const resolvedRoute = this.$router.resolve('/example-route');
resolvedRoute.then(route => {
   // 处理解析后的路由信息
});

b、this.$router.push()

  • 作用:用于进行路由导航,将用户导航到指定的路由。
  • 使用方式:接受一个路由路径或一个描述路由的对象作为参数,进行实际的导航操作。
  • 示例:
// 导航到指定路由路径
this.$router.push('/example-route');
// 导航到带参数的路由
this.$router.push({ path: '/example-route', query: { id: 1 } });

使用`this.$router.resolve()`方法时,你可以获取解析后的路由信息,但它并不会触发实际的路由导航。而使用`this.$router.push()`方法时,会将用户导航到指定的路由路径或描述的路由对象。

因此,如果你只需要获取解析后的路由信息而不进行实际的导航操作,可以使用`this.$router.resolve()`方法。如果需要进行实际的路由导航,应该使用`this.$router.push()`方法。

三、示例场景

       比如一个页面需要有可能跳转到相同页面,  也可能跳转到不同页面, 为了体验更好,  可以综合情况判断使用那种刷新方式。

//页面类型变化直接
'$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);
    },
},

四、往期相关优质推荐

VSCode 最全实用插件(VIP典藏版)
Vue超详细整理(VIP典藏版)
Vue中created,mounted,updated详解
一文快速上手Echarts(持续更新)
Vue中el-table数据项扩展各种类型总结(持续更新)

有用请点赞,养成良好习惯!

疑问、交流、鼓励请留言!

转载请说明出处内容投诉
CSS教程_站长资源网 » 【Vue】监控路由与路由参数, 刷新当前页面数据的几种方法

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买