写动态路由控制台报错

想根据模拟数据写动态路由，感觉好像没有什么问题，控制台报错

这是模拟数据

const navMenuData = [
    { title: '系统首页', icon: 'el-icon-odometer', path: '/', children: '', component: 'Home'},
    { title: '用户列表', icon: 'el-icon-s-custom', path: '/users', children: '', component: 'Users'},
    { title: '消息通知', icon: 'el-icon-message', path: '/notice', children: '', component: 'Notice'},
    { title: '可视化图表', icon: 'el-icon-s-marketing', path: '/datachart', children: '',component: 'DataChart' },
]

export default navMenuData

这是动态路由的配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/Layout/Layout.vue'
import Home from '@/views/Home/Home.vue'
import navMenuData from '@/utils/navMenu'

const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      // 首页
      {
        path: '/',
        component: Home
      }
    ]
  }
]

const router = new VueRouter({
  routes
})


router.beforeEach((to, from, next) => {
  for (let i = 0; i < navMenuData.length; i++) {
    let rou = routes[0].children;
    rou.push({
      path: navMenuData[i].path,
      component: () => import(`@/views/${ navMenuData[i].component}/${ navMenuData[i].component}.vue`)
    })
    router.addRoute(rou);
  }
  next({...to,replace: true});
})

运行结果及报错内容

navMenuData[i].path 有值吗，log一下

path: ${navMenuData[i].path}, 这样试试

看下这个文件 118行