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