Vue路由报错：TypeError: Cannot read properties of undefined (reading ‘_self‘)undefined (reading ‘$route‘)

报错内容：

原index.js错误写法：（是我不小心写错了。。。）

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router"
//引入组件
import About from "../pages/About"
import Home from "../pages/Home"
import News from "../pages/News"
import Message from "../pages/Message"
import Detail from "../pages/Detail"

//创建并暴露一个路由器
export default new VueRouter({
  routes:[
    {
      path:'/about',
      component:About,
    },
    {
      path:'/home',
      component:Home,
      children:[
        {
          path:'news',
          component:News,
        },
        {
          path:'message',
          component:Message,
          children:[
            {
              path:'detail',
              components:Detail,
            }
          ]
        }
      ]
    },
  ]
})

报错原因：

把routes配置项的最后一个component写成了components

修改后不再报错：

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router"
//引入组件
import About from "../pages/About"
import Home from "../pages/Home"
import News from "../pages/News"
import Message from "../pages/Message"
import Detail from "../pages/Detail"

//创建并暴露一个路由器
export default new VueRouter({
  routes:[
    {
      path:'/about',
      component:About,
    },
    {
      path:'/home',
      component:Home,
      children:[
        {
          path:'news',
          component:News,
        },
        {
          path:'message',
          component:Message,
          children:[
            {
              path:'detail',
              component:Detail,
            }
          ]
        }
      ]
    },
  ]
})