目錄
一、Vue監(jiān)控路由
1、Vue中watch監(jiān)控路由
2、Vue中watch監(jiān)控路由的某一個參數(shù)
3、Vue中watch同時監(jiān)控多個路由
二、刷新當(dāng)前頁面數(shù)據(jù)
1、location.reload
2、$router.go(0)
3、this.$router.resolve()與this.$router.resolve()
a、this.$router.resolve()
b、this.$router.push()
三、示例場景
四、往期相關(guān)優(yōu)質(zhì)推薦
| Vue官網(wǎng) | Element官網(wǎng) |
一、Vue監(jiān)控路由
1、Vue中watch監(jiān)控路由
????????如果你想要監(jiān)控整個路由對象的變化，包括路由路徑、參數(shù)、查詢參數(shù)等的變化，可以使用`$route`對象進行監(jiān)控。以下是一個使用`watch`監(jiān)控整個路由對象的示例：
<template>
<div>
<!-- 顯示監(jiān)控的路由信息 -->
<div>{{ monitoredRoute }}</div>
</div>
</template>
<script>
export default {
data() {
return {
monitoredRoute: null, // 用于存儲監(jiān)控的路由信息
};
},
watch: {
'$route'(newRoute) {
this.monitoredRoute = newRoute; // 將新的路由信息保存到組件的monitoredRoute屬性中
// 執(zhí)行其他操作或調(diào)用其他方法
},
//或
$route(newRoute) {
this.monitoredRoute = newRoute; // 將新的路由信息保存到組件的monitoredRoute屬性中
// 執(zhí)行其他操作或調(diào)用其他方法
},
},
};
</script>在這個示例中，我們在組件的`data`選項中定義了一個`monitoredRoute`屬性，用于存儲監(jiān)控的路由信息。在`watch`選項中，使用`'$route'`來指定要監(jiān)控的路由對象。當(dāng)路由發(fā)生變化時，`watch`函數(shù)會被觸發(fā)，將新的路由信息保存到組件的`monitoredRoute`屬性中。
你可以根據(jù)需要在`watch`函數(shù)中執(zhí)行其他操作或調(diào)用其他方法，例如根據(jù)路由信息更新組件的狀態(tài)、重新加載數(shù)據(jù)等。
請注意，上述示例中的`monitoredRoute`是一個示例屬性名，你可以根據(jù)需要將其替換為你自己定義的屬性名。
2、Vue中watch監(jiān)控路由的某一個參數(shù)
在Vue中，可以使用`watch`選項來監(jiān)控路由的某一個參數(shù)的變化。以下是一個使用`watch`監(jiān)控路由參數(shù)的示例：
<template>
<div>
<!-- 顯示監(jiān)控的參數(shù)值 -->
<div>{{ monitoredParam }}</div>
</div>
</template>
<script>
export default {
data() {
return {
monitoredParam: null, // 用于存儲監(jiān)控的參數(shù)值
};
},
watch: {
'$route.params.monitoredParam'(newValue) {
this.monitoredParam = newValue; // 將新的參數(shù)值保存到組件的monitoredParam屬性中
// 執(zhí)行其他操作或調(diào)用其他方法
},
},
};
</script>在這個示例中，我們在組件的`data`選項中定義了一個`monitoredParam`屬性，用于存儲監(jiān)控的參數(shù)值。在`watch`選項中，使用`'$route.params.monitoredParam'`來指定要監(jiān)控的路由參數(shù)。當(dāng)監(jiān)控的參數(shù)發(fā)生變化時，`watch`函數(shù)會被觸發(fā)，將新的參數(shù)值保存到組件的`monitoredParam`屬性中。
你可以根據(jù)需要在`watch`函數(shù)中執(zhí)行其他操作或調(diào)用其他方法，例如根據(jù)參數(shù)值更新組件的狀態(tài)、重新加載數(shù)據(jù)等。
請注意，上述示例中的`monitoredParam`是一個示例參數(shù)名，你需要將其替換為你要監(jiān)控的實際參數(shù)名。另外，如果你還需要監(jiān)控其他路由參數(shù)，可以在`watch`選項中添加相應(yīng)的監(jiān)控函數(shù)。
3、Vue中watch同時監(jiān)控多個路由
<template>
<div>
<!-- 顯示監(jiān)控的路由信息 -->
<div>{{ monitoredRoute }}</div>
<!-- 顯示監(jiān)控的參數(shù)值 -->
<div>{{ monitoredParam }}</div>
</div>
</template>
<script>
export default {
data() {
return {
monitoredRoute: null, // 用于存儲監(jiān)控的路由信息
monitoredParam: null, // 用于存儲監(jiān)控的參數(shù)值
};
},
watch: {
'$route'(newRoute) {
this.monitoredRoute = newRoute; // 將新的路由信息保存到組件的monitoredRoute屬性中
// 執(zhí)行其他操作或調(diào)用其他方法
},
'$route.params.monitoredParam'(newValue) {
this.monitoredParam = newValue; // 將新的參數(shù)值保存到組件的monitoredParam屬性中
// 執(zhí)行其他操作或調(diào)用其他方法
},
},
};
</script>二、刷新當(dāng)前頁面數(shù)據(jù)
1、location.reload
在Vue.js中，可以使用`location.reload()`方法重新加載當(dāng)前頁面。這個方法會導(dǎo)致瀏覽器重新發(fā)送請求并重新加載頁面。
要在Vue組件中使用`location.reload()`，可以在需要重新加載頁面的地方調(diào)用該方法。例如，在一個按鈕的點擊事件處理程序中：
methods: {
reloadPage() {
location.reload();
}
}
然后，在模板中使用這個方法：
<button @click="reloadPage">重新加載頁面</button>當(dāng)用戶點擊按鈕時，頁面將會重新加載。
需要注意的是，`location.reload()`方法會導(dǎo)致頁面完全重新加載，包括重新執(zhí)行Vue實例的生命周期鉤子函數(shù)。這可能會導(dǎo)致數(shù)據(jù)丟失，因為重新加載后，Vue實例將會被重置。
如果你只是想重新加載某個組件或重新獲取數(shù)據(jù)，而不是整個頁面，你可以考慮使用Vue的其他方法，如重新發(fā)起異步請求或重新設(shè)置組件的數(shù)據(jù)。
2、$router.go(0)
????????在Vue.js中，可以使用`$router.go()`方法進行路由導(dǎo)航。該方法用于在路由之間進行前進或后退操作。`$router.go()`方法接受一個整數(shù)作為參數(shù)，表示前進或后退的步數(shù)。正數(shù)表示前進，負數(shù)表示后退。
下面是`$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()`方法來觸發(fā)路由導(dǎo)航。例如，在一個按鈕的點擊事件處理程序中：
methods: {
goForward() {
this.$router.go(1);
},
goBack() {
this.$router.go(-1);
}
}
然后，在模板中使用這些方法：
<button @click="goForward">前進</button>
<button @click="goBack">后退</button>當(dāng)用戶點擊"前進"按鈕時，將向前導(dǎo)航一步。當(dāng)用戶點擊"后退"按鈕時，將后退一步。
需要注意的是，`$router.go()`方法只能在使用Vue Router進行路由管理的應(yīng)用程序中使用。如果你的應(yīng)用程序沒有配置Vue Router，或者當(dāng)前路由沒有前進或后退的歷史記錄，`$router.go()`方法可能不會產(chǎn)生任何效果。
3、this.$router.resolve()與this.$router.resolve()
????????`this.$router.resolve()`和`this.$router.push()`是Vue Router中的兩個不同的方法，用于處理路由相關(guān)的操作，但它們有不同的作用和使用方式。
a、this.$router.resolve()
- 作用：用于解析路由的相關(guān)信息，而不進行實際的導(dǎo)航操作。
- 使用方式：接受一個路由路徑作為參數(shù)，并返回一個Promise對象，該Promise對象包含解析后的路由信息。
- ?示例：
const resolvedRoute = this.$router.resolve('/example-route');
resolvedRoute.then(route => {
// 處理解析后的路由信息
});
b、this.$router.push()
- 作用：用于進行路由導(dǎo)航，將用戶導(dǎo)航到指定的路由。
- 使用方式：接受一個路由路徑或一個描述路由的對象作為參數(shù)，進行實際的導(dǎo)航操作。
- 示例：
// 導(dǎo)航到指定路由路徑
this.$router.push('/example-route');
// 導(dǎo)航到帶參數(shù)的路由
this.$router.push({ path: '/example-route', query: { id: 1 } });使用`this.$router.resolve()`方法時，你可以獲取解析后的路由信息，但它并不會觸發(fā)實際的路由導(dǎo)航。而使用`this.$router.push()`方法時，會將用戶導(dǎo)航到指定的路由路徑或描述的路由對象。
因此，如果你只需要獲取解析后的路由信息而不進行實際的導(dǎo)航操作，可以使用`this.$router.resolve()`方法。如果需要進行實際的路由導(dǎo)航，應(yīng)該使用`this.$router.push()`方法。
三、示例場景
???????比如一個頁面需要有可能跳轉(zhuǎn)到相同頁面,? 也可能跳轉(zhuǎn)到不同頁面, 為了體驗更好,? 可以綜合情況判斷使用那種刷新方式。
//頁面類型變化直接
'$route.query.type'(newValue) {
this.$router.push("/xx/yy_detail?type=0&id=" + row.id);
}
//相同頁面相同數(shù)據(jù)但需要重新渲染(條件結(jié)合具體情況)
'$route.query.xx'(newValue) {
this.$router.go(0);
}
//相同頁面不同數(shù)據(jù)
'$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);
},
},
四、往期相關(guān)優(yōu)質(zhì)推薦
| VSCode 最全實用插件（VIP典藏版） |
| Vue超詳細整理（VIP典藏版） |
| Vue中created，mounted，updated詳解 |
| 一文快速上手Echarts（持續(xù)更新） |
| Vue中el-table數(shù)據(jù)項擴展各種類型總結(jié)（持續(xù)更新） |
有用請點贊，養(yǎng)成良好習(xí)慣！文章來源：http://www.zghlxwxcb.cn/news/detail-712937.html
疑問、交流、鼓勵請留言！文章來源地址http://www.zghlxwxcb.cn/news/detail-712937.html
到了這里，關(guān)于【Vue】監(jiān)控路由與路由參數(shù), 刷新當(dāng)前頁面數(shù)據(jù)的幾種方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
