webpack+vue項目實戰（五，監聽路由，實現同個頁面不一樣狀態的切換）

1.前言

今天發完這一篇，就要這個系列告一段落了！之後若是有什麼要補充的會繼續補充！由於在後臺管理項目上，搭建的話，主要就是這樣了！還有的一些是具體到交互的處理，那個是要根據後端的需求，來進來比較細化的工做，我在這裏就不說了！說了意義也不大，你們的項目的項目不同的，細化的工做確定是不同的，而後開發的人不同，對接的工做確定也是不同的！因此這個得靠小夥伴本身來處理和學習了！我寫這文章的目的，但願起到的做用是授人以漁，而不是授人以魚。
好了，閒話很少說！今天要說的時利用監聽路由的方式，實現同個頁面不一樣狀態的切換。具體怎樣呢，看下面。

2.使用路由

2-1運用場景

你們看側邊欄的時候，有一個‘回款管理’和‘待確認回款’。你們都應該知道。這兩個頁面只是篩選的條件有一個不同，其餘都是同樣的。因此不必弄兩個基本如出一轍文件。因此仍是公用一個文件比較好！可是若是是公用一個文件，那麼在vue的生命週期那裏，是不會從新渲染頁面的。但根據項目的需求，在回款管理’和‘待確認回款’來回切換的時候，有不少數據是要更新的。可是‘回款管理’和‘待確認回款’是同一個文件，在這裏來回切換，不少數據無法更新。因此這個時候，就要用到路由了！

2-2實現過程

2-2-1準備步驟

要實現‘待確認回款’回款也能和‘回款管理’那樣切換，就必需要在router.js那裏配置一下！

status是指一個參數，就是利用這個參數，讓頁面在‘回款管理’和‘待確認回款’這兩個這裏來回切換。
同時，在cashList.vue的data那裏也要初始化一個變量(pageStatus)。用來記錄當前的時回款管理仍是待確認回款！
router.js配置好了以後，而後去到snav-component.vue。而後在url‘待確認回款’那裏，找到menus設置下url，設置一個將要傳給status的參數。

這裏傳的時0，也就是表明着，若是路由的參數上，若是status是等於0的話，就是‘待確認回款’頁面，不然就是‘回款管理’頁面。
詳細教程能夠參考官網--vue-router

2-2-2監聽路由

從這裏開始，操做的頁面都是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.總結

利用路由作的一些小操做，今天就說到這裏了！你們也能夠想一下，若是不用路由，這個能夠怎麼實現。路由這裏用的也是比較基礎的用法。小夥伴能夠自行研究下，另外項目上，這些一系列文章，說的也是很大致的一些東西，開發細節上的一些處理，這個要看項目需求，看對接的人等，在這裏沒法一一說明，得靠小夥伴們本身隨機應變的處理。我寫這一系列文章，但願起到的做用的是授人以漁，不是授人以魚。但願能對你們有所幫助。
到這裏，項目實戰就到這裏高一段落了，可是文章不能停，之後有什麼以爲能夠分享的，開發了什麼有趣的玩意，我會在第一時間分享。讓你們一塊兒交流下，一塊兒學習下。
最後，仍是那句話，有什麼寫的很差，或者寫錯了的，歡迎指正，讓你們相互學習下，相互幫助下。

4.往期回顧

webpack+vue項目實戰（一,搭建運行環境和相關配置）
webpack+vue項目實戰（二，開發管理系統主頁面）
webpack+vue項目實戰（三，配置功能操做頁和組件的按需加載）
webpack+vue項目實戰（四，前端與後端的數據交互和前端展現數據）