报错信息记录——Vue组件模板只能有一个根元素

报错信息

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.

报错分析

编译模板错误。组件模板应该只包含一个根元素。

在一个组件模板中应该只存在一个根元素，所以在每个组件操作中都应该只有一个根元素。

      const login = {
        template: `
        <h1>登录login组件</h1>
        <br/>
        <router-link to='/login/tab1'>Tab1</router-link>
        <router-link to='/login/tab2'>Tab2</router-link>
        <router-view/>
        `
      };

报错前的代码，在template属性中就存在了多个根元素，这样在Vue中是不允许的。

详细文档见：组件基础-单个根元素

解决方案

可以将模板的内容全部包裹在一个父元素内，来修复这个问题。这样就只存在一个根元素了。

      const login = {
        template: `
      <div>
	        <h1>登录login组件</h1>
	        <br/>
	        <router-link to='/login/tab1'>Tab1</router-link>
	        <router-link to='/login/tab2'>Tab2</router-link>
	        <router-view/>
      </div>
        `
      };