Vue嵌套路由踩坑-Component template should contain exactly one root element.

朱雀 2022-10-22 14:57 17阅读 0赞

## 主题：Vue嵌套路由踩坑-Component template should contain exactly one root element. ##

vue-cli嵌套路由案例：这里我将工程需要的代码都展示出来，可以copy下来在自己的电脑上面演示demo

报错信息：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70]  
先看这个工程的代码：  
工程目录结构：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 1]  
**main.jsp**

import Vue from 'vue'
    import App from './App'
    
    //扫描router路径下的所有组件
    import router from './router';
    
    //导入 element-ui 的组件和css样式sass
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    
    Vue.use(router);
    Vue.use(ElementUI);
    
    Vue.config.productionTip = false; //vue配置生产提示
    
    new Vue({ 
      el: '#app',
      router,
      render:h=>h(App) //ElementUI的语法
    });

index.js路由

import Vue from "vue";
    import Router from 'vue-router';
    
    import Main from "../views/Main";
    import Login from "../views/Login";
    
    import UserList from "../views/user/List";
    import UserProfile from "../views/user/Profile";
    
    //使用路由
    Vue.use(Router);
    
    export default new Router({  //相当于@requestMapping
      routes:[
        { path: '/login', component: Login},
        { path:'/main', component:Main,
          children:[ //嵌套路由
            { path: "user/profile",component: UserProfile},
            { path: "user/list",component: UserList}
          ]
        }
      ]
    })

**Vue.vue:**

<template>
      <div id="app">
        <router-link to="/login">login</router-link>
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    
    export default { 
      name: 'App'
    }
    
    </script>
    
    <style>
      #app { 
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
      }
    </style>

**Login.vue:**

<template>
      <div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model.number="ruleForm.age"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <script>
        export default { 
            data() { 
                var checkAge = (rule, value, callback) => { 
                    if (!value) { 
                        return callback(new Error('年龄不能为空'));
                    }
                    setTimeout(() => { 
                        if (!Number.isInteger(value)) { 
                            callback(new Error('请输入数字值'));
                        } else { 
                            if (value < 18) { 
                                callback(new Error('必须年满18岁'));
                            } else { 
                                callback();
                            }
                        }
                    }, 1000);
                };
                var validatePass = (rule, value, callback) => { 
                    if (value === '') { 
                        callback(new Error('请输入密码'));
                    } else { 
                        if (this.ruleForm.checkPass !== '') { 
                            this.$refs.ruleForm.validateField('checkPass');
                        }
                        callback();
                    }
                };
                var validatePass2 = (rule, value, callback) => { 
                    if (value === '') { 
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.ruleForm.pass) { 
                        callback(new Error('两次输入密码不一致!'));
                    } else { 
                        callback();
                    }
                };
                return { 
                    ruleForm: { 
                        pass: '',
                        checkPass: '',
                        age: ''
                    },
                    rules: { 
                        pass: [
                            {  validator: validatePass, trigger: 'blur' }
                        ],
                        checkPass: [
                            {  validator: validatePass2, trigger: 'blur' }
                        ],
                        age: [
                            {  validator: checkAge, trigger: 'blur' }
                        ]
                    }
                };
            },
            methods: { 
                submitForm(formName) { 
                    this.$refs[formName].validate((valid) => { 
                        if (valid) { 
                            this.$router.push("/main");
                        } else { 
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                resetForm(formName) { 
                    this.$refs[formName].resetFields();
                }
            }
        }
    </script>
    <style scoped>
    </style>

**Main.vue:**

<template>
    
        <h3>Main页面</h3>
        <router-link to="/main/user/list">list</router-link>
        <router-link to="/main/user/profile">profile</router-link>
        <router-view></router-view>
    
    </template>
    
    <script>
        export default { 
            name: "Main"
        }
    </script>
    <style scoped>
    </style>

**Profile.vue Main中的子路由：**

<template>
        <h3>个人信息</h3>
    </template>
    
    <script>
        export default { 
            name: "UserProfile"
        }
    </script>
    <style scoped>
    </style>

**List.vue:Main中的子路由：**

<template>
        <h3>用户列表页</h3>
    </template>
    
    <script>
        export default { 
            name: "UserList"
        }
    </script>
    <style scoped>
    </style>

检测代码逻辑上没有什么问题，最后通过查阅资料和询问大佬：原来是Main.vue中出现错误：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 2]  
Main.vue组件中需要根元素，否则就会报错。

展示工程的效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70]: /images/20221022/1305d81c0d114b71882a1b330e4677f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 1]: /images/20221022/2c0d2a7de1f04ef39c0ef3ff2d93c1b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 2]: /images/20221022/ce618e6fb7f6481d8436ce228f8ce3ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 3]: /images/20221022/03fe2f3506ec475daed714cb7fb5a658.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70 4]: /images/20221022/65b0fd8752e94c90b261bafe140c04d6.png