報錯信息記錄——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>
        `
      };