Vue Routerを用いてネストしたルーティングを実現したい

前提・実現したいこと

V英単語をテストするようなwebアプリを作ろうとしており、タイピング形式による入力と選択形式の入力とを切り替えられるようなページを作ろうとしていますが、ネストされた<router-view>が読み込まれません。

発生している問題・エラーメッセージ

VueWarn
1Error compiling template:
2
3
4    <p>以下の日本語に対する適当な英単語を答えよ.</p>
5    <router-view></router-view>
6    <p>入力</p>
7    
8
9- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
10
11
12found in
13
14---> <Anonymous>
15       <Root>

該当のソースコード

html
1
2<body>
3  <div id="app">
4    <nav v-cloak>
5      <router-link to="/question/typing">タイピング形式</router-link>
6      <router-link to="/question/options">オプション形式</router-link>
7      <router-link to="/result">結果画面表示</router-link>
8    </nav>
9    <router-view></router-view>
10  </div>
11
12  <script>
13  var Typing = {
14    template: `
15    <p>//テキストボックス//</p>
16    `
17  }
18
19  var Options = {
20    template: `
21    <p>選択肢1</p>
22    <p>選択肢2</p>
23    <p>選択肢3</p>
24    <p>選択肢4</p>
25    `
26  }
27
28  var Question = {
29    template: `
30    <p>以下の日本語に対する適当な英単語を答えよ.</p>
31    <router-view></router-view>
32    <p>入力</p>
33    `
34  }
35
36  var Result = {
37    template: `
38    <p>結果画面</p>
39    `
40  }
41
42  const router = new VueRouter({
43    routes: [
44      {
45        path: '/question/',
46        component: Question,
47        children: [
48          {path: 'typing',
49          component: Typing
50          },
51          {path: 'options',
52          component: Options
53          }
54        ]
55      },
56      {
57        path: '/result',
58        component: Result
59      }
60    ]
61  })
62
63  const app = new Vue({ router }).$mount('#app');
64
65  </script>
66

行動規範の内容に同意します

回答1件

ベストアンサー

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

コンポーネントの第一階層の要素(ルートエレメント)は一つである必要があります。

  var Options = {
    template: `
    <div>
      <p>選択肢1</p>
      <p>選択肢2</p>
      <p>選択肢3</p>
      <p>選択肢4</p>
    </div>
    `
  }

  var Question = {
    template: `
    <div>
      <p>以下の日本語に対する適当な英単語を答えよ.</p>
      <router-view></router-view>
      <p>入力</p>
    </div>
    `
  }

つまり解決方法としては、上記のようにdiv等で囲む必要があります。

  var Result = {
    template: `
    <p>結果画面</p>
    `
  }

ちなみにこちらに関しては、pタグ一つのため問題ありません。

投稿2018/12/06 11:46

編集2018/12/06 11:48

退会済みユーザー

総合スコア0

knmr

2018/12/07 00:53

なるほどそういうことだったんですね！　root elementをネストされた<router-view>と間違えていました、、、初歩的なところでした。ありがとうございます！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！