当前位置: 首页 > news >正文

研发效能DevOps: Vite 使用 Vue Router

目录

一、实验

1.环境

2.初始化前端项目

3.安装vue-router

4.Vite 使用 Vue Router

二、问题

1.运行出现空页面

2.Vue Router如何禁止页面回退


一、实验

1.环境

(1)主机

表1 主机

系统

软件版本备注
Windows11VS Code1.94.2
Node.jsv18.20.4(LTS)

运行(输入cmd)

bb3a3a38004c40f2bbe67919cce22e05.png

查看VS Code版本

Code --version

查看node版本

node -v

87de6fb85c2d465592c1d9bf92f6903d.png

查看npm版本

npm -v

e2bc65daa7634b05ab83d20f2e7f53ca.png

2.初始化前端项目

(1)安装vite

cnpm create vite@latest

输入y,然后选择vue

接下来选择JavaScript

完成

(2)安装依赖

切换目录

cd vite-router

这里切换cnpm安装依赖

cnpm install

(3) 运行

npm run dev

弹出界面:

可以访问到Vite + Vue

http://localhost:5173/

(4)退出

CTRL + C 结束

0f487b1ab5c24e3d91e69c4272ca89e8.png

输入Y

f23cf1681ec44fa68e7c1bdc1515faf3.png

3.安装vue-router

(1) 查阅

https://router.vuejs.org/zh/installation.html


 

(2) 安装vue-router

使用cnpm安装

cnpm install vue-router@4

(3)Vs Code 查看项目目录


(5)创建路由配置目录router

(6) router下创建index.js (实现组件与路由映射)

(7)创建页面组件目录views

(8)views下创建多个组件

Index.vue

<script setup>
</script><template><div>首页</div>
</template><style>
</style>

Devops.vue

Pipeline.vue

4.Vite 使用 Vue Router

 (1)查阅

https://router.vuejs.org/zh/guide/

不同的历史模式

https://router.vuejs.org/zh/guide/essentials/history-mode


 

(2) 修改index.js

导入创建路由的方法

import { createWebHistory, createRouter } from 'vue-router'

导入需要路由的组件

import Index from '../views/Index.vue'
import Devops from '../views/Devops.vue'
import Pipeline from '../views/Pipeline.vue'

定义路由映射

const routes = [{ path: '/', component: Index },{ path: '/devops', component: Devops },{ path: '/pipeline', component: Pipeline },]

创建路由实例

const router = createRouter({history: createWebHistory(),routes,
})

导出默认路由

export default router 

(3)查阅

https://router.vuejs.org/zh/guide/

 注册路由

(4)main.js集成路由

导入router

import router from './router'

注册路由

const app = createApp(App)
app.use(router)
app.mount('#app')

(4)查阅

https://router.vuejs.org/zh/guide/

创建链接与渲染路由组件

(5)修改App.vue

创建链接与渲染路由组件

<p><RouterLink to="/">Go to Index</RouterLink></p>
<p><RouterLink to="/devops">Go to Devops</RouterLink></p>
<p><RouterLink to="/pipeline">Go to Pipeline</RouterLink></p>
<router-view></router-view>

(6)运行

npm run dev

弹出界面:

 访问

http://localhost:5173

点击Go to Index

点击Go to Devops

点击Go to Pipeline

二、问题

1.运行出现空页面

(1)报错

(2)原因分析

index.js未成功实现组件与路由映射

(3)解决方法

修改

成功:

2.Vue Router如何禁止页面回退

(1)push

Vue Router默认是push,是可以回退页面的。

(2)replace

禁止回退,是不可以回退页面的。

(3)使用

修改App.vue

<p><RouterLink to="/" replace>Go to Index</RouterLink></p>
<p><RouterLink to="/devops" replace>Go to Devops</RouterLink></p>
<p><RouterLink to="/pipeline" replace>Go to Pipeline</RouterLink></p>
<router-view></router-view>

相关文章:

研发效能DevOps: Vite 使用 Vue Router

目录 一、实验 1.环境 2.初始化前端项目 3.安装vue-router 4.Vite 使用 Vue Router 二、问题 1.运行出现空页面 2.Vue Router如何禁止页面回退 一、实验 1.环境 &#xff08;1&#xff09;主机 表1 主机 系统 软件版本备注Windows11VS Code1.94.2Node.jsv18.20.4(LT…...

记第一次本地编译seatunnel源码

拉取代码 git clone https://github.com/apache/seatunnel.git 使用版本 我们生产环境用的是2.3.5版本&#xff0c;所以基于2.3.5-release分支代码进行编译。 maven package过程 遇到的第一个问题&#xff1a;‘com.sun.tools.javac.tree.JCTree com.sun.tools.javac.tree…...

《云主机配置全攻略》

《云主机配置全攻略》 一、云主机配置的重要性二、配置云主机的关键要素&#xff08;一&#xff09;CPU 的选择&#xff08;二&#xff09;内存的考量&#xff08;三&#xff09;硬盘的抉择&#xff08;四&#xff09;带宽的确定&#xff08;五&#xff09;机房线路的考虑&…...

RHCE nginx架构和安装

nginx架构和安装 nginx架构和安装1.1 nginx架构1.2 安装nginx1.1.1 本地安装1.1.2 官网安装1.1.3 源码安装 1.3 控制服务1.4 页面自定义 nginx架构和安装 nginx是多进程组织模式&#xff0c;而且是一个由 Master 主进程和 Worker 工作进程组成 1.1 nginx架构 1.2 安装nginx …...

Jmeter自动化实战

一、前言 由于系统业务流程很复杂,在不同的阶段需要不同的数据,且数据无法重复使用,每次造新的数据特别繁琐,故想着能不能使用jmeter一键造数据 二、创建录制模板 可参考:jmeter录制接口 首先创建一个录制模板 因为会有各种请求头,cookies,签名,认证信息等原因,导致手动复制…...

构建高效的Java SOCKS5代理:从零开始的网络转发实现

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

spring-boot(绑定配置文件及应用)

配置文件 SpringBoot使用一个全局的配置文件&#xff0c;配置文件名是固定的&#xff1b; application.properties application.yml 配置文件的作用&#xff1a;修改SpringBoot自动配置的默认值&#xff1b;SpringBoot在底层都给我们自动配置好&#xff1b; YAML&#x…...

Mac OS 搭建MySQL开发环境

Mac OS 搭建MySQL开发环境 文章目录 Mac OS 搭建MySQL开发环境一、安装Mysql&#xff1a;二、配置环境变量三、安装Navicat 本地环境&#xff1a; Mac OS Sequoia15.0.1&#xff08;M3 Max) 目标状态&#xff1a; 下载安装Mysql&#xff0c;配置相关环境。 一、安装Mysql&…...

windows下安装python库wordCloud报错

换电脑安装wordcloud半天安装失败&#xff0c;记录一下遇到的坑&#xff0c;也给大家节省点时间。 方法1&#xff1a; 错误呢就是下面这个&#xff0c;说没c编译器&#xff0c;要不就去他给的地址上安装一下&#xff0c;我安装了一下好像没什么用&#xff0c;也没太敢勾选&am…...

Spring IOC 自动装配(注入)

注解⽅式注⼊ Bean 对于 bean 的注⼊&#xff0c;除了使⽤ xml 配置以外&#xff0c;可以使⽤注解配置。注解的配置&#xff0c;可以简化配置⽂件&#xff0c; 提⾼开发的速度&#xff0c;使程序看上去更简洁。对于注解的解释&#xff0c;Spring对于注解有专⻔的解释器&#…...

Go使用SIMD指令——以string转为整数为例

本文Go使用SIMD指令采用如下方式&#xff1a; C编写对应的程序clang编译成汇编c2goasm将上述生成的汇编转为go的汇编 准备工具 clang。直接使用apt-get install clang安装即可c2goasm。 go get -u github.com/minio/c2goasm来进行安装asm2plan9s。 go get -u github.com/min…...

分享资源合集

为了方便临时使用到的一些软件&#xff0c;提供百度网盘下载。 通过百度网盘分享的文件&#xff1a;WinHex 21.2 SR-2_x86_x64.exe 链接&#xff1a;https://pan.baidu.com/s/19RAnHl_VcKUcIKADU9z9Gw?pwd6666 提取码&#xff1a;6666 通过百度网盘分享的文件&#xff1a;Zi…...

C#/WinForm 鼠标穿透自定义区域截图(后续实现录屏)

效果 窗体截图录屏 git地址&#xff1a;https://gitee.com/feng-cai/screenshot-recording...

基于SpringBoot的“社区维修平台”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“社区维修平台”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 管理员登录页面 住户管理页面 社区公关管理页面 维…...

图书管理系统汇报

【1A536】图书管理系统汇报 项目介绍1.用户登录注册功能1. 1用户角色管理2.图书管理功能2.1 添加图书2.2 编辑图书2.3 删除图书 3.图书搜索和筛选3.1 图书搜索3.2 图书筛选 4.图书借阅、图书归还4.1 图书借阅4.2 图书归还 5.用户信息管理5.1上传头像5.2修改头像5.3 修改密码 项…...

【发版通知】FormMaking 表单设计器新版发布,赋能企业实现低代码开发!

FormMaking 介绍 FormMaking 是基于 Vue 的可视化表单设计器&#xff0c;赋能企业实现低代码开发模式&#xff1b;帮助开发者从传统枯燥的表单代码中解放出来&#xff0c;更多关注业务&#xff0c;快速提高效率&#xff0c;节省研发成本。目前已经在OA系统、考试系统、报表系统…...

计算机科学与技术-毕业设计选题推荐

基于特定技术的系统设计与实现 基于深度学习的图像识别系统设计与实现基于区块链的数据安全保护技术研究与实现基于云计算的大数据处理平台设计与开发基于物联网的智能家居系统设计与实现基于机器学习的推荐算法研究与实现 面向实际应用的需求分析与开发 智慧医疗信息系统设…...

《C++音频频谱分析:开启声音世界的神秘之门》

在数字音频的广阔领域中&#xff0c;频谱分析是一项强大而引人入胜的技术。它能够将无形的声音转化为可视化的数据&#xff0c;让我们深入了解音频的特征和结构。那么&#xff0c;在 C这个强大的编程语言中&#xff0c;我们又该如何实现对音频的频谱分析呢&#xff1f; 音频频…...

GitHub 上传项目保姆级教程

构建项目仓库 登录 GitHub 并进入主页。点击右上角的 New 按钮&#xff0c;进入创建新仓库页面。输入仓库名称和描述&#xff08;可选&#xff09;&#xff0c;选择是否公开&#xff08;Public&#xff09;或私有&#xff08;Private&#xff09;。可以选择是否初始化仓库&…...

联想笔记本电脑睡眠后打开黑屏解决方法

下载联想机器睡眠无法唤醒修复工具 下载地址&#xff1a;https://tools.lenovo.com.cn/exeTools/detail/id/233/rid/6182522.html 使用完后重启电脑&#xff0c;问题解决。...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...