在工作中遇到一个Vue2项目，需要自行搭建路由。由于电脑中的Node版本过低，首先升级到支持的版本。接着发现npm安装的vue-routerv4.2.9不兼容Vue2，于是安装了v3.5.2的vue-router。创建router目录和index.js文件，配置路由字典并挂载到Vue实例上。在main.js中引入并启动项目，通过npmrundemo验证配置成功。
author：@德玛玩前端
date：2023-07-22
今天，在工作中拿到了架构师的前端框架，是一个vue2+elementui搭建的单页面架构，没有路由系统，需要自己搭建，因为以往拿到的框架都是路由系统已经搭建好，所以就很开心。终于有了项目中学习的机会，最幸运，该脚手架用的是vue2.x,还是比较好搭建的。现将搭建的步骤和遇到的问腿分享如下，欢迎各位大牛和同行们指点。
🧋首先，开局就不利，因为我的电脑里装的node是14的版本，npm的版本不支持，没办法，升级node
🧋 node升级完以后，又来了新的问题，当前npm安装的路由vrouter版本是v4.2.9，只支持vue3.0；而当前的vue的版本是2.0，不支持。 所以要想安装路由系统，只能安装v3.0版本的vue-router。
🧋使用npm安装指定版本的路由 npm i vue-router@3.5.2
🧋在项目中手动新建目录 rotuer和文件index,js
🧋在router目录下的index.js文件中，引入vue-router，vue，新建路由字典（路径和组件之间的映射），然后将vue-router挂在vue对象下，实例化这个vue-router，最后导出实例化后的vue-rouer。
在全局文件main.js下去引入router目录下的index.js文件
🧋最后启动项目，npm run demo ，能正常启动即配置成功
扫一扫
2451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
