ToB企服应用市场:ToB评测及商务社交产业平台

标题: vue 项目中无 router 文件夹，怎样安装路由 [打印本页]

---

作者: 我可以不吃啊    时间: 2024-10-30 21:27
标题: vue 项目中无 router 文件夹，怎样安装路由
两种情况：
第一种：创建项目标时候有勾选 router，但是没有天生 router 文件夹；
解决方法：
起首，查看 package.json 中有没有 router 的依赖，如下图：

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

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

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

复制代码

在main.js中到场相关内容：

1. import Vue from 'vue'
2. import App from './App.vue'
3. import router from "./router";
4. Vue.config.productionTip = false
6. new Vue({
7.   router,
8.   render: h => h(App),
9. }).$mount('#app')

复制代码

第二种：创建项目标时候没有勾选 router，package.json 中没有 router 的依赖；
解决方法：
实行如下命令安装 router

1. npm install vue-router --save

复制代码

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

题目分析：依赖版本题目，选择vue-router版本，选一个低版本的，如3.5.2
重新敲入代码：npm install vue-router@3.5.2 --save 建议3.5.2这个版本

1. npm install vue-router@3.5.2 --save

复制代码

 

 在index.js中写入如下内容：
同第一种方法中记载的
在main.js中到场相关内容：
同第一种方法中记载的


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4