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

ops/2024/10/30 22:25:35/

两种情况:

第一种:创建项目的时候有勾选 router,但是没有生成 router 文件夹;

解决方法:

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

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

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

javascript">// 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中加入相关内容:

javascript">import Vue from 'vue'
import App from './App.vue'
import router from "./router";
Vue.config.productionTip = falsenew Vue({router,render: h => h(App),
}).$mount('#app')

第二种:创建项目的时候没有勾选 router,package.json 中没有 router 的依赖;

解决方法:

执行如下命令安装 router

javascript">npm install vue-router --save

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

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

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

javascript">npm install vue-router@3.5.2 --save

 

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

同第一种方法中记录的

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

同第一种方法中记录的


http://www.ppmy.cn/ops/129711.html

相关文章

HarmonyOS开发5.0 net 启动界面设置

第一步、创建我们界面 第二步, 在EntryAbility中配置启动页面,在entry/src/main/ets/entryability/EntryAbility.ets中配置启动页面 配置如下 至此大功告成

react文档阅读笔记

文章目录 一、基础入门1. 创建声明一个组件2. 使用组件3. JSX标签语法4. 给组件添加样式5.在JSX中使用JS代码6.在JS中使用JSX7.内联样式8.条件渲染9.列表渲染10.事件处理11.更新页面(状态记录)12.react的hook函数13.组件间的数据共享 二、React哲学1.将U…

高级java每日一道面试题-2024年10月24日-JVM篇-说一下JVM有哪些垃圾回收器?

如果有遗漏,评论区告诉我进行补充 面试官: 说一下JVM有哪些垃圾回收器? 我回答: 1. Serial收集器 特点:Serial收集器是最古老、最稳定的收集器,它使用单个线程进行垃圾收集工作。在进行垃圾回收时,它会暂停所有用户线程,即St…

EasyExcel自定义下拉注解的三种实现方式

文章目录 一、简介二、关键组件1、ExcelSelected注解2、ExcelDynamicSelect接口(仅用于方式二)3、ExcelSelectedResolve类4、SelectedSheetWriteHandler类 三、实际应用总结 一、简介 在使用EasyExcel设置下拉数据时,每次都要创建一个SheetWr…

CSS复习2

CSS所有样式表都可以在CSS Reference查到。 一、利用阴影制作三角形 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"…

自动化立体仓库消防系统设计

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 新书《智能物流系统构成与技术实践》 完整版文件和更多学习资料&#xff0c;请球友到知识星球【智能仓储物流技术研习社】自行下载。 这份文件是关于自动化立体仓库消防系统设计的详细…

Spring Cache-基于注解的缓存

Spring Cache 是 Spring 提供的缓存抽象框架&#xff0c;能够将数据缓存到内存或外部缓存中&#xff0c;减少数据库或远程服务的访问频率&#xff0c;从而显著提升应用性能。Spring Cache 通过注解的方式实现缓存逻辑&#xff0c;使用方便&#xff0c;支持多种缓存实现&#xf…

MySQL-SQL性能分析

SQL执行频率 Mysql客户端连接成功后&#xff0c;通过 show [ session | global ] status 命令可以提供服务器状态信息。通过如下指令&#xff0c;可以查看当前数据库的 insert &#xff0c;update &#xff0c; delete&#xff0c;select 的访问频次。show global status like…