前端vue问题：[vue-router] "path" is required in a route configuration

Question

前端页面的home页面中的菜单栏要和后端中的menu-controller自动匹配，跟着视频配置好以后报vue-router path错误，不知道该怎么改了，麻烦指点一下，非常感谢！

这个是前端控制台的报错：

//menus.js
export const initMenu = (router, store) => {
    if (store.state.routes.length > 0) {
        return;
    }
    getRequest('/system/config/menu').then(data => {
        if (data) {
            //格式化好的router
            let fmtRoutes = formatRoutes(data);
            //添加到路由
            router.addRoute(fmtRoutes);
            //将数据存入vuex
            store.commit('initRoutes', fmtRoutes);
        }
    })
}

export const formatRoutes = (routes) => {
    let fmtRoutes = [];
    routes.forEach(router => {
        let {
            path,
            component,
            name,
            iconCls,
            children,
        } = router;
        if (children && children instanceof Array) {
            //递归
            children=formatRoutes(children);
        }
        let fmtRouter = {
            path: path,
            name: name,
            iconCls: iconCls,
            children: children,
            component(resolve) {
                if(component.startsWith('Emp')) {
                    require(['../views/emp/' + component + '.vue'], resolve);
                }else if (component.startsWith('Per')){
                    require(['../views/per/' + component + '.vue'], resolve);
                }else if (component.startsWith('Sal')){
                    require(['../views/sal/' + component + '.vue'], resolve);
                }else if (component.startsWith('Sta')){
                    require(['../views/sta/' + component + '.vue'], resolve);
                }else if (component.startsWith('Sys')){
                    require(['../views/sys/' + component + '.vue'], resolve);
                }
            }
        }
        fmtRoutes.push(fmtRouter);
    });
    return fmtRoutes;
}

//router下的index.js
Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'Login',
        component: Login,
        hidden: true
    },
    {
       //是不是这里得改一下？
        path: '/home',
        name: 'Home',
        component: Home,
        children: [
            {
                path: '/test1',
                name: '选项1',
                component: Test1
            }, {
                path: '/test2',
                name: '选项2',
                component: Test2
            }
        ]
    }
]

const router = new VueRouter({
    routes
})

export default router

<--这个是Home.vue-->
<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu router>
            <el-submenu index="1" v-for="(item,index) in routes"
                        :key="index"
                        v-if="!item.hidden">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item :index="children.path" v-for="(children,indexj) in item.children">
                {{children.name}}
              </el-menu-item>

            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Home",
  computed:{
    routes(){
      return this.$store.state.routes;
    }
  }

}
</script>

<style>


</style>

//store文件夹中的index.js
import Vue from "vue";
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        routes: []
    },

    mutations:{
        initRoutes(state,data){
            state.routes = data;
        }
    },
    actions:{}
})

Answer 1

解决了吗