Table of contents
1. Watch monitoring routing in Vue
2. Watch in Vue monitors a certain parameter of the route
3. Watch in Vue monitors multiple routes at the same time
2. Refresh the current page data
3、this.$router.resolve()与this.$router.resolve()
4. High-quality recommendations related to past issues
| Vue official website | Element official website |
1. Vue monitoring routing
1. Watch monitoring routing in Vue
If you want to monitor changes in the entire routing object, including changes in routing paths, parameters, query parameters, etc., you can use the `$route` object for monitoring. Here is an example of using `watch` to monitor an entire route object:
<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>In this example, we define a `monitoredRoute` attribute in the `data` option of the component to store monitored routing information. In the `watch` option, use `'$route'` to specify the route object to be monitored. When the route changes, the `watch` function will be triggered and save the new routing information to the `monitoredRoute` property of the component.
You can perform other operations or call other methods in the `watch` function as needed, such as updating the component's state based on routing information, reloading data, etc.
Please note that `monitoredRoute` in the above example is an example property name, you can replace it with your own defined property name as needed.
2. Watch in Vue monitors a certain parameter of the route
In Vue, you can use the `watch` option to monitor changes in a certain parameter of the route. Here is an example of using `watch` to monitor route parameters:
<template>
<div>
<!-- 显示监控的参数值 -->
<div>{
{ monitoredParam }}</div>
</div>
</template>
<script>
export default {
data() {
return {
monitoredParam: null, // 用于存储监控的参数值
};
},
watch: {
'$route.params.monitoredParam'(newValue) {
this.monitoredParam = newValue; // 将新的参数值保存到组件的monitoredParam属性中
// 执行其他操作或调用其他方法
},
},
};
</script>In this example, we define a `monitoredParam` attribute in the `data` option of the component to store the monitored parameter value. In the `watch` option, use `$route.params.monitoredParam`` to specify the route parameters to be monitored. When the monitored parameter changes, the `watch` function will be triggered and the new parameter value will be saved to the `monitoredParam` property of the component.
You can perform other operations or call other methods in the `watch` function as needed, such as updating the state of the component based on parameter values, reloading data, etc.
Please note that `monitoredParam` in the above example is an example parameter name, you need to replace it with the actual parameter name you want to monitor. In addition, if you also need to monitor other routing parameters, you can add the corresponding monitoring function in the `watch` option.
3. Watch in Vue monitors multiple routes at the same time
<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>2. Refresh the current page data
1、location.reload
In Vue.js, you can use the `location.reload()` method to reload the current page. This method causes the browser to resend the request and reload the page.
To use `location.reload()` in a Vue component, you can call this method where the page needs to be reloaded. For example, in a button's click event handler:
methods: {
reloadPage() {
location.reload();
}
}
Then, use this method in the template:
<button @click="reloadPage">重新加载页面</button>When the user clicks the button, the page will reload.
It should be noted that the `location.reload()` method will cause the page to be completely reloaded, including re-executing the life cycle hook function of the Vue instance. This may result in data loss because the Vue instance will be reset after reloading.
If you just want to reload a certain component or re-fetch data, rather than the entire page, you can consider using Vue's other methods, such as re-initiating an asynchronous request or re-setting the component's data.
2、$router.go(0)
In Vue.js, you can use the `$router.go()` method for route navigation. This method is used to move forward or backward between routes. The `$router.go()` method accepts an integer as a parameter, indicating the number of steps forward or backward. A positive number means moving forward, a negative number means moving backward.
The following is an example of how to use the `$router.go()` method:
| serial number | code | Definition |
| 1 | this.$router.go(-1); | // Back + refresh; |
| 2 | this.$router.go(0); | // refresh; |
| 3 | this.$router.go(1); | // One step forward |
| 4 | this.$router.go(2); | // Go two steps forward |
| 5 | this.$router.go(n); | // Go forward n pages |
You can use the `$router.go()` method in the Vue component method to trigger route navigation. For example, in a button's click event handler:
methods: {
goForward() {
this.$router.go(1);
},
goBack() {
this.$router.go(-1);
}
}
Then, use these methods in your template:
<button @click="goForward">前进</button>
<button @click="goBack">后退</button>When the user clicks the "Forward" button, it will navigate forward one step. When the user clicks the "Back" button, it will take one step back.
It should be noted that the `$router.go()` method can only be used in applications that use Vue Router for route management. If your application does not have a Vue Router configured, or the current route has no forward or backward history, the `$router.go()` method may not have any effect.
3、this.$router.resolve()与this.$router.resolve()
`this.$router.resolve()` and `this.$router.push()` are two different methods in Vue Router, used to handle routing-related operations, but they have different functions and usage methods.
a、this.$router.resolve()
- Function: Used to parse routing-related information without performing actual navigation operations.
- Usage: Accepts a routing path as a parameter and returns a Promise object that contains the parsed routing information.
- Example:
const resolvedRoute = this.$router.resolve('/example-route');
resolvedRoute.then(route => {
// 处理解析后的路由信息
});
b、this.$router.push()
- Function: Used for route navigation to navigate users to the specified route.
- Usage: Accept a routing path or an object describing the route as a parameter to perform actual navigation operations.
- Example:
// 导航到指定路由路径
this.$router.push('/example-route');
// 导航到带参数的路由
this.$router.push({ path: '/example-route', query: { id: 1 } });When using the `this.$router.resolve()` method, you can get the resolved routing information, but it will not trigger actual route navigation. When using the `this.$router.push()` method, the user will be navigated to the specified routing path or described routing object.
Therefore, if you only need to obtain the resolved routing information without performing actual navigation operations, you can use the `this.$router.resolve()` method. If actual route navigation is required, the `this.$router.push()` method should be used.
3. Example Scenario
For example, a page needs to be able to jump to the same page or to a different page. In order to have a better experience, you can judge which refresh method to use based on the situation.
//页面类型变化直接
'$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);
},
},
4. High-quality recommendations related to past issues
Please like it if it is useful and develop good habits!
Please leave a message for questions, communication, and encouragement!