当前位置: 首页 > 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;问题解决。...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...