配置vue-router报错解决（包含好几个错误）

刚接触前端，在跟着教程做项目的时候，到了配置路由这一环节，疯狂报错。

报的第一个错：Vue.use(VueRouter)报错

Uncaught TypeError: Cannot read properties of undefined (reading 'use')

我百度半天才知道，我安装的环境是vue3和vue-cil4，教程里教是比较老的版本，写法不一致导致的错误，在vue3和vue-cil4中不能直接 import Vue from 'vue' 和 Vue.use。

我查文档，在改成vue3语法的途中，报了第二个错：

error: Unexpected keyword 'const'

这个问题我百度了好久，但其实很好解决，主要问题就是我眼瞎（最后知道真相的我眼泪掉下来）

//我一开始是这么写的
const routes = [{
    path: '/',
    name: 'home',
    component: Home,
    redirect: '/index',
    
const router = createRouter({
    history: createWebHistory(),
    routes, // `routes: routes` 的缩写
})
}] // ←问题就在这，我把这路由配置这一小块代码包进在路由定义里了

//-----------改成这样------------------------
const routes = [{
    path: '/',
    name: 'home',
    component: Home,
    redirect: '/index',
}] 

//把上面和下面这俩块代码分开就好了

const router = createRouter({
    history: createWebHistory(),
    routes, // `routes: routes` 的缩写
})

代码重写的途中也另外报了几个错，已经回想不起来了，还是上面这个弱智问题的印象比较深刻。

主要问题应该是我改完router.js后mian.js里面的vue2写法没改成vue3的写法，都改过来就好了。

重写完毕后，又遇到了第三个问题：App.vue里面的<router-view></router-view>不生效。

是完全字面意思的不生效，F12能直接在元素里看到<router-view></router-view>这个标签

网上70%都在说命名错误，把routes写成了routers之类的，然而我在经历过上面这个傻狗错误之后必然不会出现这种小问题（因为我是直接复制文档的代码）

然后我在某个文章里看到说：把路由配置那块代码移动到路由定义那块代码的上边就好了（大坑啊！）。

确实，移动之后<router-view></router-view>生效了，但是还是一片空白，渲染不出东西。然后就报了第四个错：Uncaught TypeError: Cannot read property ‘forEach‘ of undefined

由于我深信上面那个文章里说的移动代码位置，这个问题我也百度了好久，但是一直都找不到和我相同情况的，直到我在看别人写的路由文件的时候发现，他们多了一行代码，这行代码就写在路由文件的最后一行：

export default router;

我人傻了，文档里的代码并没有这一行，我加上之后，再把刚才移动的路由配置那块代码移回来，一切都解决了。

最后完全解决的代码是这样的：

const routes = [{
    path: '/',
    name: 'home',
    component: Home,
    redirect: '/index',
}] 

const router = createRouter({
    history: createWebHistory(),
    routes, // `routes: routes` 的缩写
})

export default router;

归根结底还是我急着做毕设，没有vue3基础就直接开始跟着做项目，让我四处踩坑

度过答辩这一大劫之后我一定好好补课，唉