Vue.js 2.0 Template 사용시 주의사항

• 아래는 Template 의 HTML 태그를 정의할 때 주의해야 하는 Vue 의 성질이다.
• Vue 의 Template 에 최상위 태그가 1개만 있어야 렌더가 가능하다.
• 여러 개의 태그를 최상위 태그에 동시에 위치시킬 수 없음
• 아래 에러는 기존에 렌더하는 tag 의 안에 router-view 를 사용하지 않고 밖에 넣었을 때 발생. Component template should contain exactly one root element

var Foo = {
  template: `
    <div>foo</div>
    <router-view></router-view>
  ` // 에러 발생. 아래 이미지 참고
};
Js
Copy

• 따라서 아래와 같이 최상위 Element 는 한개만 지정해야 한다.

var Foo = {
  // div 태그 안에 텍스트와 `router-view` 포함하여 정상 동작
  template: `
    <div>foo
      <router-view></router-view>
    </div>
  `
};