如何根據路線和使用vue-route來更改Vue組件中的數據對象？

我面臨的問題上vuejs申請工作時：如何根據路線和使用vue-route來更改Vue組件中的數據對象？

我不得不改變在少數vuejs組件冠軍，這取決於路線

routes: [ { path: '/', components: { //with default data FirstScreen, Advantages, Slider, }, }, { path: '/moscow', components: { //with special data for Moscow FirstScreen, Advantages, Slider, }, }, { path: '/berlin', components: { //with special data for Berlin FirstScreen, Advantages, Slider, }, }, ],

和數據在所有.vue文件看起來像這樣

data() { 
    return { 
    defaultTitle: 'some string', 
    defaultArray: ['defaultFirst', 'defaultSec'], 
    }; 
},

而我有大約100個城市......我該如何解決這個問題？

來源

2017-03-26 elektrobober

假設你使用vue-router，你可以'鉤入'其中一個非常有用的方法稱爲beforeEach。此方法充當一種中間件，並在任何給定路由執行之前運行。

router.beforeEach((to, from, next) => { 
    document.title = to.meta.title 
    next(); 
});

來源

2017-03-26 13:10:34 afterburn

凱文，thx你爲你的答案，這是有幫助的。但在我的情況下，不僅標題發生了變化。事實上，我必須根據標題和字幕（h1/h2/h3）的路線，在每個組件中傳遞字符串數組或更多。也許你能幫助我呢？ – elektrobober

嗨，我強烈建議不要使用你的路由器來傳遞數據，因爲它會挫敗諸如Vue之類的MVC模型的目的。理想情況下，您需要根據給定路線從Vue組件內獲取數據（例如/ posts/123從服務器獲取post 123的數據）。通過分離您的路由器和組件邏輯，您可以保持應用程序的模塊化。這個完全相同的問題在這裏討論[https://github.com/vuejs/vue-router/issues/398](https://github.com/vuejs/vue-router/issues/398） – afterburn

精心製作，想象一下，每當用戶訪問應顯示城市信息的路線（例如/柏林或/阿姆斯特丹）時，無論城市在網址中傳遞什麼，城市組件都會呈現。然後，City組件通過檢查其構造函數中的當前路由參數並從該後端獲取該城市的數據，並用該數據填充該組件。 – afterburn

如果有人需要根據路由，實現數據傳輸和真的希望將其硬編碼到航線文件有可能與此：https://github.com/vuejs/vue-router/blob/dev/docs/en/essentials/passing-props.md

在我的情況下，它會看起來像：

routes: [ 
{ 
    path: '/', 
    components: { 
    FirstScreen, 
    Advantages, 
    BigSlider, 
    }, 
    props: { 
    FirstScreen: { 
     title: 'title', 
     subtitle: ['arr1', 'arr2'], 
    }, 
    Advantages: { 
     title: 'title', 
     advantages: 'advantages', 
    }, 
    BigSlider: { 
     title: 'title', 
     slideText: 'slideText', 
    }, 
    }, 
},

和組件，你必須做這樣的事情

export default { 
props: { 
    title: { 
    type: String, 
    }, 
    subtitle: { 
    type: Array, 
    }, 
},

它會正常工作，但我同意凱文Karsopawiro的一部分，這種方法是不可維護的。因此，使用城市組件從後端獲取數據對我來說是最好的。

來源

2017-03-27 04:55:42 elektrobober

如何根據路線和使用vue-route來更改Vue組件中的數據對象？

回答

相關問題