Question

使用vuejs 1代码是：

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。

重写这个的正确方法是什么？

感谢

Answer 1

您必须将路由器作为参数：

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>

Answer 2

试试这个（App == Index）

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

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

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

使用vue 2，路由器和vue-loader进行引导

2 个答案: