vue实现一个简单导航栏

news2024/11/18 18:40:10

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

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

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

相关文章

【数据结构-字符串 四】【字符串识别】字符串转为整数、比较版本号

废话不多说,喊一句号子鼓励自己:程序员永不失业,程序员走向架构!本篇Blog的主题是【字符串转换】,使用【字符串】这个基本的数据结构来实现,这个高频题的站点是:CodeTop,筛选条件为&…

Andriod学习笔记(一)

写在前面的话 App开发的编程语言Java和KotlinXML App连接的数据库App工程目录结构模块级别的编译配置文件清单文件 界面显示与逻辑处理 安卓是一种基于Linux内核的自由及开放源代码的操作系统,主要使用于移动设备。 Mininum SDK表示安卓该版本以上的设备都可以运行该…

Vue计算属性的使用

当我们想要通过data中运算得到一个新的数据时,我们就可以使用计算属性。比如:data里的单价price和数量number可以相乘计算总价sum,这个sum我们就称为计算属性。 计算属性的语法格式: computed:{ 计算属性名称 ( ) { return 计算…

LAS Spark 在 TPC-DS 的优化揭秘

更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群 文章主要介绍了火山引擎湖仓一体分析服务 LAS Spark(下文以 LAS Spark 指代)在 TPC-DS 上的性能突破与优化策略。TPC-DS 是一个模拟复杂数据…

4、在 CentOS 8 系统上安装 pgAdmin 4

pgAdmin 4 是一个开源的数据库管理工具,专门用于管理和操作 PostgreSQL 数据库系统。它提供了一个图形用户界面(GUI),使用户能够轻松地连接到 PostgreSQL 数据库实例,执行 SQL 查询,管理数据库对象&#xf…

网络拓扑自动扫描工具

topology-scanner Topology-Scanner是WeOps团队免费开放的一个网络拓扑自动扫描模块,可以自动发现网络设备的类型、网络设备之间的互联 使用方式 java -jar ./topology-scanner.jar --config_path./config/ 配置说明 1. 拓扑发现请求参数文件(request.json) i…

Web3 新手攻略:9 个不可或缺的 APP 助力你踏入加密领域

Web3世界充满了无限机遇,但要掌握它,您需要合适的工具���。今天,我将为您介绍9款Web3必备APP,涵盖钱包、DEX、和工具三大类别。而且,我要特别强烈推荐一个强大的钱包——Bitget Wall…

基于java+vue+springboot的家庭理财记账信息网站

运行环境 开发语言:Java 框架:springboot JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 数据库工具:Navicat11 开发软件:eclipse/myeclipse/idea Maven包:Maven 项目介绍 在这科技…

Bitxhub跨链平台

BitXHub跨链平台 跨链系统架构 过程 在跨链合约中调用统一写好的Broker合约Broker合约抛出事件由Plugin捕获到封装成平台统一的数据结构提交到中继链中目的链的跨链网关从中继链中同步IBTP数据结构网关将该数据结构通过Plugin提交到目的链 中继链体系架构 中继链的模块和流程…

【Vue面试题十七】、你知道vue中key的原理吗?说说你对它的理解

文章底部有个人公众号:热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享? 踩过的坑没必要让别人在再踩,自己复盘也能加深记忆。利己利人、所谓双赢。 面试官:你知道vue中key的原理吗…

10.本项目的简单介绍及所用工具

本项目的简单介绍及所用工具 本项目的层次架构适合初学者或者有一些基础的同学,项目整体简单明了,有着非常严谨的逻辑思维,并且在前面文章中也讲了一些项目中所需要的软件安装配置以及一些前置的在本项目中所需要的java基础知识。 项目名称 …

TCPUDP

TCP 1.什么是TCP TCP是处于运输层的通信协议,该协议能够实现数据的可靠性传输。 2.TCP报文格式 源端口和目的端口:各占两个字节,发送进程的端口和接收进程的端口号。 序号:占4个字节,序号如果增加到溢出,则下一个序…

几种预训练模型微调方法和peft包的使用介绍

文章目录 微调方法Lora(在旁边添加训练参数)Adapter(在前面添加训练参数)Prefix-tuning(在中间添加训练参数)Prompt tuning PEFTPEFT 使用PeftConfigPeftModel保存和加载模型 微调方法 现流行的微调方法有:Lora,promp…

【MySql】5- 实践篇(三)

文章目录 1. 日志和索引问题1. 日志相关问题1.1 两阶段提交 2. 业务设计相关问题 2. order by工作原理2.1 全字段排序2.2 rowid 排序2.3 全字段排序 VS rowid 排序 3. 正确显示随机消息3.1 内存临时表3.2 磁盘临时表3.3 随机排序方法 1. 日志和索引问题 1. 日志相关问题 1.1 …

NodeJs内置模块child_process

内置模块child_process子进程 写在前面 子进程是Nodejs的核心Api,如果你会shell命令,它会有非常大的帮助,或者你喜欢编写前端工程化工具之类,它也有很大的用处,以及处理CPU密集型应用。 创建子进程 Nodejs创建子进…

如何处理用户输入验证和表单提交?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

PCL点云处理之点云重建为Mesh模型并保存到PLY文件 ---方法二 (二百一十一)

PCL点云处理之点云重建为Mesh模型并保存到PLY文件 ---方法二 (二百一十一) 一、算法介绍二、算法实现1.代码2.效果一、算法介绍 离散点云重建为mesh网格模型,并保存到PLY文件中,用于其他软件打开查看,代码非常简短,复制粘贴即可迅速上手使用,具体参数根据自己的点云数据…

Unity可视化Shader工具ASE介绍——5、ASE快捷键和常用节点介绍

大家好,我是阿赵。   继续介绍Unity可视化Shader插件ASE。这次来说一些常用节点的快捷键,顺便介绍一些常用的节点。   用过UE引擎的朋友可能会发现,ASE的整体用法和UE的材质节点编辑器非常的像,甚至连很多节点的快捷键都和UE的…

【Vue面试题十六】、Vue.observable你有了解过吗?说说看

文章底部有个人公众号:热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享? 踩过的坑没必要让别人在再踩,自己复盘也能加深记忆。利己利人、所谓双赢。 面试官:Vue.observable你有了解…

Python笔记;库,包,模块

在Python中库没有官方说法。 是其他地方沿用过来的。 姑且认为他是一个包或多个包的集合。 包里有子包和模块。 模块以.py格式存储。 下图是一个例子,对于Robot包: import math a math.sqrt(9) 等价于 from math import * a sqrt(9) from math im…