2016-10-04 123 views
1

隨着vuejs 1中的代碼是:的Bootstrap與VUE 2,路由器和VUE裝載機

const App = Vue.extend(Index); 
router.start(App, '#app'); 

Index是一個組件。

我嘗試將其轉換爲VUE 2這樣的:

const App = Vue.extend(Index); 
const app = new App(router).$mount('#app'); 

但是,這給出了一個[Vue warn]: Error when rendering root instance

什麼是重寫這個的正確方法?

感謝

回答

4

你必須給路由器作爲參數:

const app = new App({ router }).$mount('#app'); 

例子:

const Index = { 
 
    template: `<div id="app">It's working!</div>` 
 
} 
 
const App = Vue.extend(Index) 
 
const router = new VueRouter() 
 

 
const app = new App({ router }).$mount('#app');
<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 
 
<div id="app"></div>

+0

非常感謝工作代碼片段!現在,在我的應用程序中,它說'未知的自定義元素:'。試圖找出原因...... –

+1

如果你使用npm和webpack/browserify,你必須調用'Vue.use(VueRouter)'來確保vue-router註冊組件''@francoisromain – Atinux

+0

這就是問題......謝謝 –

2

試試這個程序(App ==指數)

const App = Vue.extend(require('./App.vue')) 

const router = new VueRouter({ 
    routes, 
    mode: 'abstract' 
}) 

new App({ 
    router, 
}).$mount('#app')