從vue路由器渲染Vue模板的不同方法

Question

我目前使用的是Vue JS，我沒有使用任何路由器。我沒有使用獨立構建，並希望使用webpack實現並使用.vue擴展名。尋找更好的方式來使用變量渲染Vue模板。例如：

// App.Vue 
var Loading = { 
    template: `<div>Loading...</div>` 
} 

// main.js 
var currentView = Loading; 

new Vue({ 
    el: "#app", 
    render(h) { 
    return h(currentView); 
    } 
}); 

上面的例子完全正常工作沒有任何問題。想了解是否有更好的方法來處理。

比方說，如果currentView包含像

currentView = "Loading" 

render(h) { 
    return h(eval(currentView)); // works 
    return h([currentView]); // template not found or mount error 
} 

一個字符串，我們怎能取代價值的模板傳遞給渲染功能之前，它的？

在此先感謝。

Answer 1

h是Vue的createElement，用於創建虛擬Dom元素。與用於創建真正Dom元素的瀏覽器的createElement相同。所以它只適用於虛擬Dom而不是字符串。如果你想讓你的第二個例子工作，你必須註冊一個名爲「Loading」的組件。

var Loading = { 
    template: `<div>Loading...</div>` 
} 

// main.js 
var currentView = "Loading"; 

new Vue({ 
    el: "#app", 
    render(h) { 
    return h(currentView); 
    }, 
    components: { 
    Loading: Loading //register Loading component as "Loading" 
    } 
}); 

或者將其註冊爲全球加載組件

Vue.component("Loading", Loading);