目录

一、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`监控整个路由对象的示例：

<code><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()`，可以在需要重新加载页面的地方调用该方法。例如，在一个按钮的点击事件处理程序中：

methods: {

reloadPage() {

location.reload();

}

}

然后，在模板中使用这个方法：

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

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

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

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

2、$router.go(0)

<code>methods: {

goForward() {

this.$router.go(1);

},

goBack() {

this.$router.go(-1);

}

}

然后，在模板中使用这些方法：

<button @click="goForward">前进</button>code>

<button @click="goBack">后退</button>code>

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

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

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