3

Vue Router をセットアップしようとしています。私が間違っているのかわかりません。エラーの取得

Failed to mount component: template or render function not defined. (found in root instance)

繰り返しになりますが、私は React から Vue に来ています。それらは非常に似ていますが、小さな違いがあり、Vue リソースはまだそれほど多くありません。

Webpack テンプレートを使用し、単一ファイル コンポーネントを使用しています。私が完全に理解していなかったのは、ドキュメントのこの部分でした

// 1. Define route components.
// These can be imported from other files
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

これは彼が私と同じimport Foo from 'path/to/component/ですか？

とにかく、すべての助けに感謝します！

ここに私のmain.jsファイルがあります

import Vue from 'vue'
import App from './App'
import QuizBuilder from '../src/components/QuizBuilder.vue'
import ResourceInfo from '../src/components/ResourceInfo.vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  { path: '/info', component: ResourceInfo },
  { path: '/quiz-builder', component: QuizBuilder }
]

const router = new VueRouter({
  routes
})

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

私index.htmlの見た目はこんな感じ

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>Digestible</title>
  </head>
  <body>
    <div id="app">
        <router-view></router-view>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>
4

1 に答える 1

5

コンポーネントが適切にあると仮定すると、まだ小さな更新が必要です。

vue ルーターをモジュール システムとしてロードする場合、アプリケーションは次の方法で初期化する必要があります。

new Vue({
   el: '#app',
   router,
   render: h => h(App)
});
于 2016-10-14T06:07:47.207 に答える