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

vue实现一个简单导航栏

news 文章来源：https://blog.csdn.net/asdfsadfasdfsa/article/details/133741978 2025/5/15 12:13:21

Vue之简单导航栏

在vue中，想要实现导航栏的功能，除了用传统的a标签以外，还可以使用路由——vue-router来实现，前端小白在此记录一下学习过程（默认已经搭建好vue的脚手架环境）：

  1. 建立项目并安装vue-router的模块（这一过程就不赘述辽），在main.js文件中引入路由并声明使用：
    引入路由
  2. 建立一些组件，在App.vue中引入以便测试导航栏：
    建立组件
  3. 在src文件夹中新建一个routes.js文件用于配置路由的跳转路径：
    routes.js
  4. 在main.js中引入刚刚创建的routes.js文件并创建路由：
    创建路由
  5. 新建一个Header.vue组件用作导航栏并给其设定简单样式：
    Header.vue
  6. 将Header.vue导入至App.vue并使用：
    在这里插入图片描述

至此，我们的简易导航栏就基本完成！

代码: https://gitee.com/zhangyu_123123/vue-router-study

相关文章：

vue实现一个简单导航栏

Vue之简单导航栏 在vue中，想要实现导航栏的功能，除了用传统的a标签以外，还可以使用路由——vue-router来实现，前端小白在此记录一下学习过程（默认已经搭建好vue的脚手架环境）： 建立项目并安装…...

编程日记 2023/10/13 5:21:07

每日leetcode_LCP01猜数字

每日leetcode_LCP01猜数字 记录自己的成长&#xff0c;加油。 题目出处&#xff1a;LCP 01. 猜数字 - 力扣&#xff08;LeetCode&#xff09; 题目 解题 class Solution {public int game(int[] guess, int[] answer) {int count 0;for (int i 0 ; i< guess.length; i){…...

编程日记 2023/10/13 5:20:06

接口自动化测试_L1

目录&#xff1a; 接口自动化测试框架介绍 接口测试场景自动化测试场景接口测试在分层测试中的位置接口自动化测试与 Web/App 自动化测试对比接口自动化测试与 Web/App 自动化测试对比接口测试工具类型为什么推荐 RequestsRequests 优势Requests 环境准备接口请求方法接口请求…...

编程日记 2023/10/13 5:19:05

Windows提权

1. MySQL提权 1.1 UDF提权 udf ‘user defined function’&#xff0c;即’用户自定义函数’。是通过添加新函数&#xff0c;对MYSQL的功能进行扩充 1、如何获得udf文件 2、将文件放到哪才能让mysql承认这个函数 3、函数功能 4、为什么这东西能提权(自定义函数指令是直接…...

编程日记 2023/10/13 5:17:03

香港服务器的优势？

香港服务器作为近年来国内站长建站使用最为频繁的服务器之一&#xff0c;香港服务器是不需要备案的&#xff0c;而且相对于众多国内服务器 来说&#xff0c;的确是有诸多优势&#xff0c;下面就来具体说下选择香港服务器的优势&#xff1a; 1、访问速度快 搭建网站&#xff0c;…...

编程日记 2023/10/13 5:15:59

关于开展2023年度光明科学城出站博士后生活资助申报工作的通知

各相关单位&#xff1a; 根据《光明区关于实施光明科学城“人才高地计划”的若干措施》&#xff08;深光发〔2022〕1号&#xff09;和《光明科学城青年科技人才培育专项行动方案》&#xff08;深光人才〔2022〕2号&#xff09;有关规定&#xff0c;现就2023年度光明科学城出站博…...

编程日记 2023/10/13 5:14:57

“.NET视频总结:认识框架的结构和组件，掌握开发工具的奥妙“

目录 第一单元&#xff1a;二十一世纪程序执行 背景: 总结&#xff1a; 第二单元:对象导向与类别设计 背景: 总结&#xff1a; 第三单元&#xff1a;使用类别与基底类别库 背景: 总结: 第四单元:Windows开发程序 背景: 总结: 第五单元:防护式程序设计 背景: 总结…...

编程日记 2023/10/13 5:13:55

STM32 CubeMX PWM三种模式（互补，死区互补，普通）（HAL库）

STM32 CubeMX PWM两种模式&#xff08;HAL库&#xff09; STM32 CubeMX STM32 CubeMX PWM两种模式&#xff08;HAL库&#xff09;一、互补对称输出STM32 CubeMX设置代码部分 二、带死区互补模式STM32 CubeMX设置代码 三、普通模式STM32 CubeMX设置代码部分 总结 一、互补对称输…...

编程日记 2023/10/13 5:12:53

Linux系统导入导出docker容器的sql数据

Linux系统导入导出docker容器的sql数据 一 要从Docker容器中将数据库导出到本地 确保您已经安装了Docker&#xff0c;并且已经运行了包含数据库的Docker容器。 检查容器中运行的数据库服务的名称或容器ID。您可以使用命令 docker ps 来列出正在运行的容器和相关信息。 使用…...

编程日记 2023/10/13 5:10:50

SpringBoot之使用Redis和注解实现接口幂等性

文章目录 1 接口幂等性1.1 概念1.2 实现思路1.3 代码实现1.3.1 pom1.3.2 JedisUtil1.3.3 自定义注解ApiIdempotent1.3.4 ApiIdempotentInterceptor拦截器1.3.5 TokenServiceImpl1.3.6 TestApplication 1.4 测试验证1.4.1 获取token的控制器TokenController1.4.2 TestController…...

编程日记 2023/10/13 5:09:47

《3D 数学基础》几何检测-相交性检测

目录 1. 2D直线相交 2. 3D射线相交点 3. 射线和平面的交点 4. 3个平面的交点 5. 射线和圆或者球交点 6. 两个圆或者球是否相交 7. 球和平面的相交性检测 8. 射线和AABB的相交性&#xff08;13.17&#xff09; 9. 射线和三角形的相交性&#xff08;13.16&#xff09; …...

编程日记 2023/10/13 5:08:45

文字与视频结合效果

效果展示 CSS 知识点 mix-blend-mode 属性的运用 实现整体页面布局 <section class"sec"><video autoplay muted loop><source src"./video.mp4" type"video/mp4" /></video><h2>Run</h2><!-- 用于切…...

编程日记 2023/10/13 5:07:43

大数据Doris（九）：配置BE步骤

文章目录 配置BE步骤 一、配置be节点...

编程日记 2023/10/13 5:06:42

BuyVM 纽约 VPS 测评

description: 发布于 2023-07-05 BuyVM 纽约 VPS 测评 产品链接&#xff1a;https://my.frantech.ca/cart.php?gid38 G口不限流量&#xff0c;抗一般投诉&#xff0c;不抗版权投诉。 CPU很快&#xff0c;硬盘不错。 无大陆优化&#xff0c;但大陆连通性很不错&#xff0c;…...

编程日记 2023/10/13 5:05:40

H3C交换机的40G堆叠线 ，可以插在普通光口做堆叠吗？

环境&#xff1a; S6520X-24ST-SI交换机 H3C LSWM1QSTK2万兆40G堆叠线QSFP 问题描述&#xff1a; H3C交换机的40G堆叠线 &#xff0c;可以插在普通光口做堆叠吗&#xff1f; 解答&#xff1a; 1.H3C交换机的40G堆叠线通常是用于连接堆叠模块或堆叠端口的。这些堆叠线通常使…...

编程日记 2023/10/13 5:04:39

【Java 进阶篇】JavaScript三元运算符详解

JavaScript是一门广泛用于前端和后端开发的编程语言&#xff0c;具备强大的表达式和运算符。本篇博客将重点介绍JavaScript中的三元运算符&#xff0c;解释其语法、用法和示例。如果您是JavaScript初学者&#xff0c;或者希望更深入了解这门语言的运算符&#xff0c;那么这篇博…...

编程日记 2023/10/13 5:03:37

MySQL数据库技术笔记(4)

关系型数据库需要使用设计范式&#xff1a; 第一范式&#xff1a;遵从原子性&#xff0c;属性不可再分&#xff0c;数据库表的每一列都是不可分割的基本数据项&#xff0c;同一列中不能有多个值。 例如&#xff1a;需要创建一张地址表&#xff0c;存储地址信息。将地址信息划…...

编程日记 2023/10/13 5:02:35

批量图片转文字识别OCR身份证件信息提取软件

现在的OCR软件很多&#xff0c;有在线的也有本地的&#xff0c;单识别文字功能还行&#xff0c;不过能批量识别的好像不多&#xff0c;网上搜了几个都不怎么好用。尤其是识别身份证件之类的软件&#xff0c;并且还能提取出识别到的信息&#xff0c;比如姓名 名族地址等等更少。…...

编程日记 2023/10/13 5:01:34

Mac/Wins Matlab如何查看APPs源码

查看Apps方法一样&#xff0c;点击HOME-preferences-MATLAB-Apps查看你的Apps安装路径。 你的Apps文件就安装在该目录下&#xff0c;直接进入这个目录就可以看到你自己写的APPs文件&#xff0c;...

编程日记 2023/10/13 4:59:31

Web应用-Thinkphp框架-开发指南

Thinkphp框架 二级导航分类&#xff0c;模板继承&#xff0c;内置标签Public 修改MVC模块化 ——访问机制传参加载模版模版引入 分离Runtime 缓存文件管理员添加数据验证及验证场景 控制器 validate 在sql执行&#xff08;敏感操作&#xff09;之前验证数据模板 分页数据表连接…...

编程日记 2023/10/13 4:58:30

LeetCode【300】最长递增子序列

题目&#xff1a; 思路&#xff1a; 通常来说&#xff0c;子序列不要求连续&#xff0c;而子数组或子字符串必须连续&#xff1b;对于子序列问题&#xff0c;第一种动态规划方法是&#xff0c;定义 dp 数组&#xff0c;其中 dp[i] 表示以 i 结尾的子序列的性质。在处理好每个…...

编程日记 2023/10/13 4:57:28

JRebel在IDEA中实现热部署 (JRebel实用版)

JRebel简介&#xff1a; JRebel是与应用程序服务器集成的JVM Java代理&#xff0c;可使用现有的类加载器重新加载类。只有更改的类会重新编译并立即重新加载到正在运行的应用程序中&#xff0c;JRebel特别不依赖任何IDE或开发工具&#xff08;除编译器外&#xff09;。但是&…...

编程日记 2023/10/13 4:55:24

uniapp微信小程序之分包异步化之组件分包

一、组件分包异步化解决的问题 日渐增加的通用组件造成的主包空间不足； 提升小程序访问速度，降低白屏率； 二、开启组件分包异步化过程中遇到的问题 如何进行占位组件配置； 如何解决通过$refs访问异步组件报错； 如何判断所有异步组件都已加载完毕； 多分包组件之间互相调用…...

编程日记 2023/10/13 4:52:22

Nacos（替代Eureka）注册中心

Nacos初步学习 Nacos 是一个开源的服务注册和配置中心&#xff0c;它允许您注册、注销和发现服务实例&#xff0c;并提供了配置管理的功能。下面是Nacos的最基础用法&#xff1a; 1. 服务注册和发现&#xff1a; 首先&#xff0c;您需要将您的应用程序或服务注册到Nacos中。…...

编程日记 2023/10/13 4:51:17

FHRP首跳冗余的解析

首跳冗余的解析 个人简介 HSRP hot standby router protocol 热备份路由协议 思科设备上 HSRP VRRP 华为设备上 VRRP HSRP v1 version 1 HSRP v2 version 2 虚拟一个HSRP虚拟IP地址 192.168.1.1 开启HSRP的抢占功能 通过其他参数 人为调整谁是主 谁是从 &a…...

编程日记 2023/10/13 4:50:16

垂直分表为什么能够加快查询效率？

前言 垂直分表是分库分表中分表操作上一个重要的实现方式&#xff0c;利用垂直分表可以提高数据的处理效率和查询速度&#xff0c;本节主要围绕 垂直分表为什么能够加快查询速度 展开说明&#xff0c;以mysql查询的底层流程为例。 垂直分表是将一张表按列分为多张表&#xff0c…...

编程日记 2023/10/13 4:48:12

Linux网络基础知识全面总结

文章目录 linux网络基础知识1.1 IP地址和子网掩码1.2 网关和路由1.3 域名系统 (DNS)1.4 端口和协议 Linux网络配置2.1 ifconfig命令2.2 网络接口配置文件2.3 DHCP自动获取IP地址2.4 静态IP地址配置2.5 网络重启和应用配置3. 网络工具和命令3.1 ping命令3.2 traceroute和mtr命令…...

编程日记 2023/10/13 4:46:09

【arm实验2】按键中断事件控制实验

设置按键中断&#xff0c;按键1按下&#xff0c;LED亮&#xff0c;再次按下&#xff0c;灭 按键2按下&#xff0c;蜂鸣器叫&#xff0c;再次按下&#xff0c;停 按键3按下&#xff0c;风扇转&#xff0c;再次按下&#xff0c;停 主函数&#xff1a; linuxlinux:~/study/08-c$…...

编程日记 2023/10/13 4:45:08

【数据结构-栈 二】【单调栈】每日温度、接雨水

废话不多说&#xff0c;喊一句号子鼓励自己&#xff1a;程序员永不失业&#xff0c;程序员走向架构&#xff01;本篇Blog的主题是【单调栈的应用】&#xff0c;使用【栈】这个基本的数据结构来实现&#xff0c;这个高频题的站点是&#xff1a;CodeTop&#xff0c;筛选条件为&am…...

编程日记 2023/10/13 4:44:06

基于Keil a51汇编 —— 控制语句

ALIGN ALIGN expression ALIGN 语句将位置计数器设置为下一个地址模 2^表达式。 这可用于确保下一条语句在 2^n 边界上对齐。例如&#xff0c;对齐缓存行中的代码或数据。如有必要&#xff0c;汇编程序会创建一个间隙。间隔字节的内容因各个部分而异&#xff1a; 在data中未定…...

编程日记 2023/10/13 4:41:03