【Vue】监控路由与路由参数, 刷新当前页面数据的几种方法 |
您所在的位置：网站首页 › 前端返回上一页不刷新页面 › 【Vue】监控路由与路由参数, 刷新当前页面数据的几种方法 |
【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监控路由
1、Vue中watch监控路由
如果你想要监控整个路由对象的变化，包括路由路径、参数、查询参数等的变化，可以使用`$route`对象进行监控。以下是一个使用`watch`监控整个路由对象的示例： {{ monitoredRoute }} export default { data() { return { monitoredRoute: null, // 用于存储监控的路由信息 }; }, watch: { '$route'(newRoute) { this.monitoredRoute = newRoute; // 将新的路由信息保存到组件的monitoredRoute属性中 // 执行其他操作或调用其他方法 }, //或 $route(newRoute) { this.monitoredRoute = newRoute; // 将新的路由信息保存到组件的monitoredRoute属性中 // 执行其他操作或调用其他方法 }, }, };在这个示例中，我们在组件的`data`选项中定义了一个`monitoredRoute`属性，用于存储监控的路由信息。在`watch`选项中，使用`'$route'`来指定要监控的路由对象。当路由发生变化时，`watch`函数会被触发，将新的路由信息保存到组件的`monitoredRoute`属性中。 你可以根据需要在`watch`函数中执行其他操作或调用其他方法，例如根据路由信息更新组件的状态、重新加载数据等。 请注意，上述示例中的`monitoredRoute`是一个示例属性名，你可以根据需要将其替换为你自己定义的属性名。 2、Vue中watch监控路由的某一个参数在Vue中，可以使用`watch`选项来监控路由的某一个参数的变化。以下是一个使用`watch`监控路由参数的示例： {{ monitoredParam }} export default { data() { return { monitoredParam: null, // 用于存储监控的参数值 }; }, watch: { '$route.params.monitoredParam'(newValue) { this.monitoredParam = newValue; // 将新的参数值保存到组件的monitoredParam属性中 // 执行其他操作或调用其他方法 }, }, };在这个示例中，我们在组件的`data`选项中定义了一个`monitoredParam`属性，用于存储监控的参数值。在`watch`选项中，使用`'$route.params.monitoredParam'`来指定要监控的路由参数。当监控的参数发生变化时，`watch`函数会被触发，将新的参数值保存到组件的`monitoredParam`属性中。 你可以根据需要在`watch`函数中执行其他操作或调用其他方法，例如根据参数值更新组件的状态、重新加载数据等。 请注意，上述示例中的`monitoredParam`是一个示例参数名，你需要将其替换为你要监控的实际参数名。另外，如果你还需要监控其他路由参数，可以在`watch`选项中添加相应的监控函数。 3、Vue中watch同时监控多个路由 {{ monitoredRoute }} {{ monitoredParam }} export default { data() { return { monitoredRoute: null, // 用于存储监控的路由信息 monitoredParam: null, // 用于存储监控的参数值 }; }, watch: { '$route'(newRoute) { this.monitoredRoute = newRoute; // 将新的路由信息保存到组件的monitoredRoute属性中 // 执行其他操作或调用其他方法 }, '$route.params.monitoredParam'(newValue) { this.monitoredParam = newValue; // 将新的参数值保存到组件的monitoredParam属性中 // 执行其他操作或调用其他方法 }, }, }; 二、刷新当前页面数据 1、location.reload在Vue.js中，可以使用`location.reload()`方法重新加载当前页面。这个方法会导致浏览器重新发送请求并重新加载页面。 要在Vue组件中使用`location.reload()`，可以在需要重新加载页面的地方调用该方法。例如，在一个按钮的点击事件处理程序中： methods: { reloadPage() { location.reload(); } }然后，在模板中使用这个方法： 重新加载页面当用户点击按钮时，页面将会重新加载。 需要注意的是，`location.reload()`方法会导致页面完全重新加载，包括重新执行Vue实例的生命周期钩子函数。这可能会导致数据丢失，因为重新加载后，Vue实例将会被重置。 如果你只是想重新加载某个组件或重新获取数据，而不是整个页面，你可以考虑使用Vue的其他方法，如重新发起异步请求或重新设置组件的数据。 2、$router.go(0)在Vue.js中，可以使用`$router.go()`方法进行路由导航。该方法用于在路由之间进行前进或后退操作。`$router.go()`方法接受一个整数作为参数，表示前进或后退的步数。正数表示前进，负数表示后退。 下面是`$router.go()`方法的使用方法示例： 序号代码释义1this.$router.go(-1); // 后退+刷新；2this.$router.go(0); // 刷新；3this.$router.go(1); // 前进一步4this.$router.go(2); // 前进两步5this.$router.go(n); // 前进n个页面你可以在Vue组件的方法中使用`$router.go()`方法来触发路由导航。例如，在一个按钮的点击事件处理程序中： methods: { goForward() { this.$router.go(1); }, goBack() { this.$router.go(-1); } }然后，在模板中使用这些方法： 前进 后退当用户点击"前进"按钮时，将向前导航一步。当用户点击"后退"按钮时，将后退一步。 需要注意的是，`$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数据项扩展各种类型总结（持续更新）
有用请点赞，养成良好习惯！ 疑问、交流、鼓励请留言！ |
【本文地址】
今日新闻 |
推荐新闻 |