資訊專欄INFORMATION COLUMN
摘要：好了，閑話不多說今天要說的時利用監聽路由的方式，實現同個頁面不同狀態的切換。只要等于，那么頁面就是待確認回款頁面進入待確認回款頁面中，回款狀態的篩選標簽要加上。
1.前言
今天發完這一篇，就要這個系列告一段落了！以后如果有什么要補充的會繼續補充！因為在后臺管理項目上，搭建的話，主要就是這樣了！還有的一些是具體到交互的處理，那個是要根據后端的需求，來進來比較細化的工作，我在這里就不說了！說了意義也不大，大家的項目的項目不一樣的，細化的工作肯定是不一樣的，然后開發的人不一樣，對接的工作肯定也是不一樣的！所以這個得靠小伙伴自己來處理和學習了！我寫這文章的目的，希望起到的作用是授人以漁，而不是授人以魚。
好了，閑話不多說！今天要說的時利用監聽路由的方式，實現同個頁面不同狀態的切換。具體怎樣呢，看下面。
大家看側邊欄的時候，有一個‘回款管理’和‘待確認回款’。大家都應該知道。這兩個頁面只是篩選的條件有一個不一樣，其他都是一樣的。所以沒必要弄兩個基本一模一樣文件。所以還是公用一個文件比較好！但是如果是公用一個文件，那么在vue的生命周期那里，是不會重新渲染頁面的。但根據項目的需求，在回款管理’和‘待確認回款’來回切換的時候，有很多數據是要更新的。但是‘回款管理’和‘待確認回款’是同一個文件，在這里來回切換，很多數據沒法更新。所以這個時候，就要用到路由了！
要實現‘待確認回款’回款也能和‘回款管理’那樣切換，就必須要在router.js那里配置一下！
status是指一個參數，就是利用這個參數，讓頁面在‘回款管理’和‘待確認回款’這兩個這里來回切換。
同時，在cashList.vue的data那里也要初始化一個變量(pageStatus)。用來記錄當前的時回款管理還是待確認回款！
router.js配置好了之后，然后去到snav-component.vue。然后在url‘待確認回款’那里，找到menus設置下url，設置一個將要傳給status的參數。
這里傳的時0，也就是代表著，如果路由的參數上，如果status是等于0的話，就是‘待確認回款’頁面，否則就是‘回款管理’頁面。
詳細教程可以參考官網--vue-router
從這里開始，操作的頁面都是cashList.vue了，小伙伴要注意哦！
首先，使用路由，就要監聽路由，我們使用watch監聽。
watch: {
//監聽路由
$route: {
handler: function (val, oldVal) {
//獲取路由參數
let _urlParams = this.$route.params;
//先清空搜索字段（this.keyFrom）所有屬性的值
for (let key in this.keyFrom) {
this.keyFrom[key] = null
}
//如果路由參數存在，并且參數含有status。
if (_urlParams && _urlParams.status) {
//就把回款狀態keyFrom.cashStatus成‘待確認回款’狀態！
this.keyFrom.cashStatus = _urlParams.status;
//pageStatus小伙伴自己在data定義哦，記錄當前狀態！
this.pageStatus = _urlParams.status;
}
//添加標簽
this.addTags();
//更新數組cashList
this.getList();
},
//深度觀察監聽
deep: true
}
}
$route.params就是路由的參數，大家要注意理解哦！
2-2-3頁面處理監聽完路由
就處理一下，頁面上了，有什么處理呢，大家分析下。
1.‘待確認回款’頁面中，回款狀態這個下拉框，是固定的，不定改的，在頁面上，就要禁用
這個很簡單，只要綁定disabled屬性就可以了，后面的判斷就是，只要pageStatus等于0就綁定，路由的參數是字符串的"0",大家也可以pageStatus==0。只要pageStatus等于0，那么頁面就是‘待確認回款頁面’
2.進入‘待確認回款’頁面中，回款狀態的篩選標簽要加上。
這個就是在監聽路由的時候已經做了，數組也更新了。
3.‘待確認回款’頁面中，重置搜索的時候，其它條件清除，回款狀態依然存在。
這個其實和監聽路由一樣的道理，也是一樣的做法
resetSearch(){
//先清空搜索字段keyFrom
for (let key in this.keyFrom) {
this.keyFrom[key] = null
}
//如果是待確認回款頁面，就設置回款狀態keyFrom.cashStatus=0
if (this.pageStatus === "0") {
this.keyFrom.cashStatus = "0";
}
//添加標簽和更新數組
this.addTags();
this.getList();
}
4.頁面標題的改變！
這個就真的太簡單了。根據pageStatus判斷就好。
3.總結利用路由做的一些小操作，今天就說到這里了！大家也可以想一下，如果不用路由，這個可以怎么實現。路由這里用的也是比較基礎的用法。小伙伴可以自行研究下，另外項目上，這些一系列文章，說的也是很大體的一些東西，開發細節上的一些處理，這個要看項目需求，看對接的人等，在這里無法一一說明，得靠小伙伴們自己隨機應變的處理。我寫這一系列文章，希望起到的作用的是授人以漁，不是授人以魚。希望能對大家有所幫助。
到這里，項目實戰就到這里高一段落了，但是文章不能停，以后有什么覺得可以分享的，開發了什么有趣的玩意，我會在第一時間分享。讓大家一起交流下，一起學習下。
最后，還是那句話，有什么寫的不好，或者寫錯了的，歡迎指正，讓大家相互學習下，相互幫助下。
webpack+vue項目實戰（一,搭建運行環境和相關配置）
webpack+vue項目實戰（二，開發管理系統主頁面）
webpack+vue項目實戰（三，配置功能操作頁和組件的按需加載）
webpack+vue項目實戰（四，前端與后端的數據交互和前端展示數據）
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83869.html
摘要：前端日報精選了解中的全局對象和全局作用域張鑫旭鑫空間鑫生活子進程你應該知道的一切直出內存泄露問題的追查實踐我他喵的到底要怎樣才能在生產環境中用上模塊化騰訊前端大會大咖說大咖干貨，不再錯過發布發布中文翻譯在使用進行本地開發代碼 2017-07-07 前端日報 精選 了解JS中的全局對象window.self和全局作用域self ? 張鑫旭-鑫空間-鑫生活Node.js 子進程：你應該知道...
摘要：重定向可以實現某些需要根據特定邏輯改變頁面原本路由的需求，例如簡單的未登錄狀態下的頁面訪問個人信息路由時應該重定向到登錄路由頁面。 前言 為了給讀者更好的體驗，去理解vue-router和下一篇介紹vuex，決定還是來一個實戰教程來帶大家更加的去深入理解vue-router，在這之前，讀者先自行了解和去官網下載npm和node，附：npm官網 項目構建 這里我采用vue-cli+web...
摘要：重定向可以實現某些需要根據特定邏輯改變頁面原本路由的需求，例如簡單的未登錄狀態下的頁面訪問個人信息路由時應該重定向到登錄路由頁面。 前言 為了給讀者更好的體驗，去理解vue-router和下一篇介紹vuex，決定還是來一個實戰教程來帶大家更加的去深入理解vue-router，在這之前，讀者先自行了解和去官網下載npm和node，附：npm官網 項目構建 這里我采用vue-cli+web...
摘要：重定向可以實現某些需要根據特定邏輯改變頁面原本路由的需求，例如簡單的未登錄狀態下的頁面訪問個人信息路由時應該重定向到登錄路由頁面。 前言 為了給讀者更好的體驗，去理解vue-router和下一篇介紹vuex，決定還是來一個實戰教程來帶大家更加的去深入理解vue-router，在這之前，讀者先自行了解和去官網下載npm和node，附：npm官網 項目構建 這里我采用vue-cli+web...
閱讀 803·2021-09-06 15:02
閱讀 2446·2019-08-30 15:43
閱讀 2169·2019-08-30 11:26
閱讀 2376·2019-08-26 12:12
閱讀 3546·2019-08-23 18:24
閱讀 3262·2019-08-23 18:16
閱讀 700·2019-08-23 17:02
閱讀 2248·2019-08-23 15:34
