vue项目之《 搭建路由系统 》

news2024/11/27 10:35:02

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 ,能正常启动即配置成功

请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/780262.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据结构初阶--单链表

目录 一.单链表的定义 二.单链表的分类 2.1.不带头结点的单链表 2.2.带头结点的单链表 三.单链表的功能实现 3.1.单链表的定义 3.2.单链表的打印 3.3.单链表的结点的创建 3.4.单链表的尾插 3.5.单链表的头插 3.6.单链表的尾删 3.7.单链表的头删 3.8.单链表的查找 …

【Vue3】Vue3核心内容(上)

🎀个人主页:努力学习前端知识的小羊 感谢你们的支持:收藏🎄 点赞🍬 加关注🪐 文章目录 常用的Composition APIsetup函数ref函数reactive函数vue3中的响应式原理vue2的响应式Vue3的响应式 reactive对比Refse…

数据结构---手撕图解七大排序(含动图演示)

文章目录 插入排序直接插入排序希尔排序 选择排序选择排序堆排序 交换排序冒泡排序快速排序hoare版挖坑法前后指针法快速排序的递归展开图快速排序的优化三数取中法 快速排序的非递归实现 归并排序 插入排序 插入排序分为直接插入排序和希尔排序,其中希尔排序是很值…

xxl-job分布式任务调度器的学习

先看一下原生的任务调度器 package com.xxl.job.executor.service.jobhandler;import org.springframework.scheduling.annotation.EnableScheduling; import org.springframework.scheduling.annotation.Scheduled; import org.springframework.stereotype.Component;Compone…

3.Docker网络和资源控制

文章目录 Docker操作二Docker网络实现原理端口映射查看日志 网络模式host模式container模式none模式bridge模式自定义网络 Docker资源控制CPU资源控制设置CPU使用率上限设置CPU资源占用比(设置多个容器才有效)设置容器绑定指定CPU 内存使用限制设置磁盘I…

RK3399移植u-boot

RK3399移植u-boot 0.前言一、移植1.交叉工具链安装2.获取bl31.elf3.移植u-boot1)下载:2)配置:修改串口波特率:修改emmc:配置FIT:配置boot delay:(可选) 3)编译:4)生成idbloader.img文件&#xf…

使用 Docker 快速上手中文版 LLaMA2 开源大模型

本篇文章,我们聊聊如何使用 Docker 容器快速上手朋友团队出品的中文版 LLaMA2 开源大模型,国内第一个真正开源,可以运行、下载、私有部署,并且支持商业使用。 写在前面 感慨于昨天 Meta LLaMA2 模型开放下载之后,Git…

实验五 分支限界法

实验五 分支限界法 01背包问题的分治限界法的实现 剪枝函数 限界函数 1.实验目的 1、理解分支限界法的剪枝搜索策略,掌握分支限界法的算法框架 2、设计并实现问题,掌握分支限界算法。 2.实验环境 java 3.问题描述 给定n种物品和一背包。物品i的重…

JMeter基础入门教程之CSV数据文件设置CSV Data Set Config

最近在做压力测试,登录功能用到了配置元件:CSV 数据文件设置,可以将登录用户名和密码放在一个csv文件中,然后通过CSV数据文件设置元件读取出来,用来做压测。 一、CSV文件 CSV文件小知识分享:是指"逗号…

Linux内核--内存管理

MMU的产生背景 在计算机出现的早期,其内存资源十分有限,一般只有几十几百KB,当时的程序规模也小,对于当时的程序而言,KB级的内存资源尚足够使用。但随着计算机技术的发展,应用程序的规模不断膨胀&#xff…

k8s部署wordpress+mysql博客平台

k8s部署wordpressmysql博客平台 1、yaml文件准备1.1 wordpress-db.yaml1.2 wordpress.yaml 2、部署安装2.1 先创建wordpress命名空间2.2 部署wordpress-db2.3部署wordpress 3、访问测试 1、yaml文件准备 1.1 wordpress-db.yaml apiVersion: apps/v1kind: Deploymentmetadata:…

【flink】ColumnarRowData

列式存储 在调试flink读取parquet文件时,读出来的数据是ColumnarRowData,由于parquet是列式存储的文件格式,所以需要用一种列式存储的表示方式,ColumnarRowData就是用来表示列式存储的一行数据,它包含多个数组的数据结…

Matlab求解基于RRT算法的自定义垛型的路径避障

目录 背景 1 RRT搜索算法 2 基于Matlab的RRT搜索算法 3 基于Matlab的自定义垛型绘制 4 基于RRT算法的自定义垛型的路径避障 背景 在码垛机械臂路径规划过程中,需要根据现有箱子的码垛状态,给出下一个箱子的最佳码放无碰撞路径。RRT 快速搜索随机…

vue2项目 自定义详情组件

vue2项目 自定义详情组件 效果组件代码组件引入以及传参格式寄语 效果 组件代码 DetailFormRow.vue已经封装好&#xff0c;根据数据格式直接引用即可。 <template><div class"detail-form"><el-row class"detail-form-row" style"ma…

基本函数、常见曲线图像

基本函数图像是指一些常见的数学函数的图像&#xff0c;这些函数在数学和工程等领域中经常被使用。下面是一些常见的基本函数及其图像&#xff1a; 参考文献&#xff1a;同济版高等数学【第七版】上下册教材

几张表格搞定Mysql的SQL语句

一、数据库的登录与退出 登录Mysqlmysql -uroot -p123退出Mysqlexit 二、对数据库的操作 查询所有数据库show databases;创建数据库create database 数据库名字;删除数据库drop database 数据库名字;查询创建数据库的具体语句show create database 数据库名字;使用数据库use…

自学网络安全(黑客),遇到问题怎么解决

自学网络安全很容易学着学着就迷茫了&#xff0c;找到源头问题&#xff0c;解决它就可以了&#xff0c;所以首先咱们聊聊&#xff0c;学习网络安全方向通常会有哪些问题&#xff0c;看到后面有惊喜哦 1、打基础时间太长 学基础花费很长时间&#xff0c;光语言都有几门&#xf…

RocketMQ的系统设计

消息存储 下图为producer、broker、consumer的交互过程 1.消息存储整体架构 CommitLog&#xff1a;消息主体以及元数据的存储主体&#xff0c;存储Producer端写入的消息主体内容(即Producer端投递的消息都会先写入CommitLog中)&#xff0c;消息内容不是定长的。单个文件大小默…

代码随想录day8 | KMP 28.实现strStr() 459.重复的子字符串

文章目录 一、实现strStr()二、重复的子字符串 一、实现strStr() 先学学KMP算法&#xff0c;代码随想录 28.实现strStr() class Solution { public:void getNext(int* next, const string& s) {int j -1;next[0] j;for(int i 1; i < s.size(); i) { // 注意i从1开始…

win 安装虚拟机 再安装macos

0 视频教程 windows虚拟机一键安装苹果系统macos&#xff0c;轻松拥有xcode环境_哔哩哔哩_bilibili在windows环境下vmware虚拟机一键安装macos Catalina10.15.7苹果系统&#xff0c;帮助学习ios编程的朋友们实现xcode环境。文字教程&#xff1a;https://www.dhzy.fun/archives…