位置: IT常识 - 正文

Vue自定义网页顶部导航栏(vue自定义页面)

编辑:rootadmin
Vue自定义网页顶部导航栏 Vue自定义web网页顶部导航栏

推荐整理分享Vue自定义网页顶部导航栏(vue自定义页面),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue网页标题,vue置顶功能,vue制作网页,vue制作漂亮网页,vue自定义dialog,vue设置网页title,vue怎么设置首页,vue设置网页title,内容如对您有帮助,希望把文章链接给更多的朋友!

说明:此组件是为论坛类项目定制的一个实用的顶部导航栏,当然也可以用于其他的Web项目,只需要稍作修改便可以达到想要的效果。其中导航栏包含了搜索栏,用户头像,以及基本的导航标题。导航栏标题的选中是通过 vue-router(路由)实现。

💕💕*:文末附下载连接*

导航栏效果

Vue自定义网页顶部导航栏(vue自定义页面)

详细步骤

第一步:安装 vue-router

npm i vue-router@3

第二步:在 main.js 中引入和使用 VueRouter

import VueRouter from 'vue-router';Vue.use(VueRouter)

第三步: 创建一个组件BBSHeader

<template> <div> <div class="header"> <div class="box"> <h1> <img src="../assets/logo.png"> <span>Aubuary</span> </h1> <nav> <router-link active-class="active" to="/home">首页</router-link> <router-link active-class="active" to="/ask">问答</router-link> <router-link active-class="active" to="/community">社区</router-link> </nav> </div> <div class="box"> <input class="text" type="text" placeholder="请输入关键词~~~" name="search"> <input class="button" type="button" value="搜索"> <img src="../assets/portrait.png"> <nav> <a >消息</a> <a>发布</a> </nav> </div> </div> <div class="contents"> <div class="content"> <!--指定组件的位置--> <router-view></router-view> </div> </div> </div></template><script> export default { name: "BBSHeader" }</script><style scoped> .header{ display: flex; align-items: center; justify-content: space-between; height: 50px; background-color:#292c2f; color: #ffffff; /*吸顶效果*/ /* position: sticky; position: -webkit-sticky; !*兼容 -webkit 内核的浏览器*! top: 0px; !*必须设一个值,否则不生效*!*/ } .box{ display: flex; align-items: center; } h1{ display: flex; align-items: center; font: normal 28px Cookie, Arial, Helvetica, sans-serif; padding: 0px 20px; } img{ width: 40px; height: 40px; } nav { display: flex; align-items: center; margin: 0px 40px; font:16px Arial, Helvetica, sans-serif; } nav a{ padding: 0 15px; width: 32px; text-decoration:none; color: #ffffff; font-size: 16px; font-weight: normal; opacity: 0.9; } nav a:hover { opacity: 1; } .active { color: #608bd2; pointer-events: none; opacity: 1; } /*搜索框*/ .text{ height: 22px; font-size: 14px; border: 1px solid #ccc; padding: 3px 16px; border-bottom-left-radius: 20px; border-top-left-radius: 20px; } .text:focus{ outline: none; border-color: rgba(82, 168, 236, 0.8); box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); } .button{ width: 60px; height: 30px; font-size: 14px; margin-right: 35px; border: 1px solid #608bd2; background-color: #608bd2; border-top-right-radius: 20px; border-bottom-right-radius: 20px; } .contents{ display: flex; justify-content: center; } .content{ display: flex; width: 1400px; height: 1400px; /*background-color: #f0f2f3;*/ }</style>

第四步:创建一个路由器 新建如下文件夹和文件 |–pages   |–BBSAsk.vue   |–BBSCommunity.vue   |–BBSHome.vue |–router   |–index.js

其中index.js中的内容如下

import VueRouter from 'vue-router';import BBSHome from "@/pages/BBSHome";import BBSAsk from "@/pages/BBSAsk";import BBSCommunity from "@/pages/BBSCommunity";//创建一个路由器const router = new VueRouter({ mode: 'history', routes:[ { name: 'home', path:'/home', component:BBSHome, }, { name: 'ask', path: '/ask', component: BBSAsk, }, { name:'community', path: '/community', component:BBSCommunity, } ]})export default router

第五步:在 main.js 中引入创建好的 router

import router from "@/router";//在 new Vue对象的时候
本文链接地址:https://www.jiuchutong.com/zhishi/297503.html 转载请保留说明!

上一篇:【新星计划】如何写好你的博客,涨粉技巧总结(新星计划会限流吗)

下一篇:Vue+Element UI-el-date-picker时间日期选择器组件(实现向后端传值)

  • 附加税做账交多了如何冲回
  • 产权转移书据印花税计税依据
  • 房地产企业年报台账怎么填
  • 银行理财算投资吗
  • 分公司企业所得税怎么缴纳
  • 其他资本公积属于
  • 财产理赔收入怎么做账
  • 已认证抵扣的发票如何红字信息表
  • 资产负债表的资产方能够提供的信息包括
  • 公司出让土地是利好
  • 验资帐户
  • 租赁厂房发生的改造装修费用
  • 固定资产领用流程图
  • 来料加工企业的会计处理问题
  • 出口退税退的是进项税还是销项税
  • 苗木增值税发票税率
  • 销项已开进项还没有收到分录如何处理?
  • 独资企业个人所得税汇算清缴
  • 差额纳税的会计处理
  • 未分配利润转增股本 个人所得税
  • 中标服务费会计科目
  • 用工会经费发放福利
  • 计划成本法下材料入库的会计分录
  • 防洪保安基金应用范围
  • 往来款和应收账款
  • 进项税额已经认证抵扣了怎么处理
  • ntfs磁盘压缩
  • ibm笔记本进bios
  • 哪些业务可以进入共享服务中心
  • 电脑显示器模糊不清晰是什么原因
  • 清理系统所有垃圾
  • linux的vi编辑器怎么用
  • 轻薄本拆卸
  • 广告公司的材料的作用有哪些
  • ConquerCam.exe进程的详细介绍 ConquerCam进程信息介绍
  • elementui ts
  • 迷迭香怎么养殖方法
  • 对外支付企业所得税计税依据
  • 限售股是好是坏
  • 葡萄牙海岸风光
  • php生成图片验证怎么弄
  • 小规模负数发票怎么申报增值税
  • 文心一言中国版
  • mount.nfs an incorrect mount
  • 国内php大牛
  • 注册机械加工公司需要什么
  • 识别假人民币的简便方法
  • 员工借款未还离职怎么办
  • python字符串如何换行
  • 公司法人和经理的区别
  • 什么时候计提所得税费用会计分录
  • 怎么登记现金日记账和银行存款日记账
  • 非财政补助结余分配属于什么科目
  • 通货膨胀率怎么求
  • 政府补助如何确定收入
  • 大金额维修费用怎么入账
  • 出差期间招待费用怎样报销
  • 公司支付给实习生的报酬如何税前扣除?
  • 融资租赁固定资产的账务处理实例
  • 小规模收的专票以后能抵扣吗
  • 赠送货物金额为多少
  • 企业应该设置哪些部门
  • mysql5.6解压版安装教程
  • 在unix系统中采用的页面置换
  • jquery对动态生成的进行操作
  • 原生javascript开发
  • androidsocket原理
  • 用bat打开cmd执行命令
  • jquery的点击事件怎么写
  • python错误代码
  • python常见的格式化输出小结
  • android studio i使用
  • JavaScript While 循环 教程
  • jq动态设置css
  • 税收预测的内容
  • 国家税务局扬州 袁霞
  • 房地产预缴土增值税
  • 营业税属于地方税
  • 税收优惠政策有哪些企业
  • 计生法废止
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设