话不多说，直接上报错图

下面是路由index.js,乍一看没毛病吧，vite也没报错，但是跳转的时候就会报错。

import { createRouter, createWebHashHistory } from 'vue-router';


const routes = [
  {
    path: '/',
    name: 'Home',
    component: () =>import('../pages/home.vue'),
  },
  {
    path: '/about',
    name: 'About',
    components: () =>import('../pages/about.vue'),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

报错翻译过来的意思是：vue router.esm bundler.js:3295错误：路由组件无效

我当时还在找是不是import的路径错了，还是文件名大小写拼错了，但是一想不应该啊，这路径都是编译器语法提示出来的，自己检查了也发现没错。

说出来不怕笑话，我在双击component这个单词的时候，发现下面的component没有被高亮提示，按理说如果一样应该一起高亮。就像下面这个效果。

事实上就是单词拼错了，component写成compontent，跳转的时候路由直接找不到这个组件，哈哈哈哈笑死我了。

也希望大家写路由的时候注意，更别写成components，到时候能把你郁闷死。

routes，routers也不要写错，路由配置上的错编译器提示的不是很明显，自己记得不清楚的话，找起来可费劲。