报错信息
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>
`
};