左右箭头导航vue_vue2组件系列第四十二节：NavBar 导航栏

最新推荐文章于 2025-06-28 09:12:53 发布

维权骑士

最新推荐文章于 2025-06-28 09:12:53 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签：左右箭头导航vue

本文介绍了Vue应用中如何创建和使用NavBar组件，包括设置标题、左右箭头、文字及触发事件。通过在router.js配置路由并在index.vue中引入，展示了基础用法和自定义内容的方法，利用slot属性实现内容的自定义布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

NavBar就是程序顶部的内容，相当于网站里的面包屑的作用。

准备工作：

{ path: '/navbar', name: 'navbar', component: () => import('./views/NavBar.vue') }

NavBar 导航栏

至今为止呢，我们的首页显示的样式子是这样滴〜不知道不觉间我们已经学完了38个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。

代码演示NavBar 导航栏：

基础方法：

import { Toast } from 'vant';clickLeft() { Toast("你按了返回键") }, clickRight() { Toast("你按了按钮键") },

title: 标题

left-text: 左侧文字

right-text: 右侧文字

left-arrow：左侧箭头

click-left：点击左侧箭头部分的事件

click-right：点击右侧文字部分的事件

自定义右侧内容：

使用slot属性：

slot: 其值有三个，分别是title，left，right三个值。也就是可以自定义左中右三个位置的内容。

到目前为止呢，NavBar就演示完了！庆祝一下我们又学完一个组件啦！

今天就到这里啦。休息休息一会儿吧〜明天继续加油噢！加油