如何在Vue路由器中動態設置目標組件

Question

我正在嘗試動態設置vue-router路由的目標組件。

原因是我需要從服務器檢索數據以瞭解要定位的正確組件。

一個解決方案，我想過是添加類似於全局後衛：

router.beforeEach((to, from, next) => { 
    get_data_from_server(to.fullPath).then(() => { 
    // set the "to" component, but how? 
    next(); 
}) 

但是，正如評論說，我將如何設置「組件」 - 有中沒有組件屬性的「到」目的。 （它看起來像是在components.default.render中，但沒有記錄，看起來也不應該混淆）。

另一種選擇是使用上面的邏輯，但添加了特殊情況代碼重定向，但後來我發現沒有辦法創建針對正確組件的動態/新路由。

應該如何創建到構建時未知的目標的路由？

Answer 1

此解決方案似乎工作。

router.beforeEach((to, from, next) => { 
    get_data_from_server(to.fullPath).then(component => { 
    if (to.matched.length === 0) { 
     // the target route doesn't exist yet 
     router.addRoutes({path: to.path, component: component}) 
     next(to.fullPath) 
     return 
    } else { 
     // the route and component are known and data is available 
     next() 
    } 
}) 

的關鍵是發現，在上面我的評論鏈接顯示VUE路由器致力於實現addRoutes()。

有一點需要注意的是，新的路線被添加到最後（有意義），所以任何出現的通配符都可能會產生意想不到的匹配。我有一個重定向到默認頁面的流暢路由。但是在新增加的比賽之前匹配，因爲它早於列表。這導致了堆棧溢出。實際上，if (to.matched.length === 0)之後的代碼是默認路由。