vue 项目中无 router 文件夹，如何安装路由

两种情况：

第一种：创建项目的时候有勾选 router，但是没有生成 router 文件夹；

解决方法：

首先，查看 package.json 中有没有 router 的依赖，如下图：

自行在 src 目录下添加 router 文件夹，再在其文件夹下面创建 index.js；

在index.js中写入如下内容：

// src/router/index.js 就是当前项目的路由模块
// 配置相关路由信息，导入这个 vue 的目的是为了调用 Vue.use() 这个函数
import Vue from 'vue'
// 导入路由插件
import VueRouter from 'vue-router'
// 导入要使用的组件
import HelloWorld from "../components/HelloWorld.vue";
// vue 在使用插件前，需要通过 Vue.use(插件) 来安装插件
Vue.use(VueRouter)
// 创建路由实例对象
const router = new VueRouter({
  // routes 是一个数组，作用是定义 hash 地址与组件之间的对应的关系
  routes: [
    { path: '/HelloWorld', component: HelloWorld }
  ],
})
// 向外共享路由的实例对象
export default router

在main.js中加入相关内容：

import Vue from 'vue'
import App from './App.vue'
import router from "./router";
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

第二种：创建项目的时候没有勾选 router，package.json 中没有 router 的依赖；

解决方法：

执行如下命令安装 router

npm install vue-router --save

注意：有的人安装的时候会报错，报错信息如下：

问题分析：依赖版本问题，选择vue-router版本，选一个低版本的，如3.5.2

从新敲入代码：npm install vue-router@3.5.2 --save 建议3.5.2这个版本

npm install vue-router@3.5.2 --save

 在index.js中写入如下内容：

同第一种方法中记录的

在main.js中加入相关内容：

同第一种方法中记录的