在vue.js應用程序中利用瀏覽器後退/前進按鈕

我有一個應用程序，它具有一組改變狀態的下拉組件。。下拉列表的狀態控制一個主要的數據表，其中有基於參數的信息。涼。在vue.js應用程序中利用瀏覽器後退/前進按鈕

我想改變網址，這樣用戶就可以與他們的同事共享網址，並且只需在不選擇下拉參數的情況下顯示數據表。

例如：http://localhost:8080/?region=372&pc=341&pc=375或http://localhost:8080/?region=372&pc=341&vendor=123456

現在我已經得到了通過（通過watch）手動觀看選擇的下拉參數並建立一個網址，並使用this.$router.push情況發生變化，更新瀏覽器歷史記錄這個工作。我有一種感覺，這是不完全正確的，但它是唯一可靠的方式，我一直能夠更新網址。

主要問題是，當我點擊瀏覽器的後退/前進按鈕時，組件不會根據url更新其狀態。如果我回撥/轉發，應用程序仍處於當前狀態。我如何正確地去做這件事？

來源

2017-06-08 Gurnzbot

您是否在使用歷史記錄模式？ – thanksd

是的。沒有hasbangs。 – Gurnzbot

我想這是因爲你使用URL查詢參數，它不像vue-router的路由參數那樣綁定。也許你可以把一個觀察者放在'$ route.query'上並根據改變的值設置數據？ – thanksd

它看起來像你有效地試圖將你的下拉列表的狀態綁定到你的URL查詢。不幸的是，VueRouter並沒有爲此而設計的解決方案。

我不知道你的數據是如何構成的，所以讓我們假設你有一個對象dropdownParams含有相關參數：

dropdownParams: { 
    region: 372, 
    pc: 341, 
    vendor: 123456, 
}

您需要設置一個觀察者對dropdownParams以更新$route查詢當這些更新時。使用$router.replace代替$router.push使歷史不會改變：

watch: { 
    dropdownParams(params) { 
    // format the data however you want this is an example with lodash 
    let query = _.pickBy(params, p => !_.isEmpty(p)); 
    this.$router.replace({ query: query }); 
    } 
}

然後，在mounted鉤，你可以設置基於任何相關$route.query參數dropdownParams對象，如果他們已經存在：

mounted() { 
    let keys = _.keys(this.dropdownParams); 
    _.assign(this.dropdownParams, _.pick(this.$route.query, keys)); 
}

現在，當用戶更改下拉參數時，這些更改將反映在URL中。而且，如果用戶使用已存在的URL查詢參數加載組件，則組件會將這些值設置爲下拉列表。

來源

2017-06-08 17:46:38 thanksd

如果相同的組件用於相關路由，安裝的掛鉤是否也適用於瀏覽器後退/前進按鈕？ – Gurnzbot

當組件安裝到DOM時，'mounted'將會啓動一次。如果組件在路由更改時掛起，它將不會觸發。 – thanksd

因此，我們再次回到如何處理瀏覽器後退/前進使用。似乎需要手動完成。 – Gurnzbot

在vue.js應用程序中利用瀏覽器後退/前進按鈕

回答

相關問題