vue2组件系列第四十二节:NavBar 导航栏

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

准备工作：

1. 创建一个页面: NavBar.vue
2. 在router.js里配置NavBar页面的路由

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

1. 在index.vue里添加一项

<a href="javascript:void(0)" @click="$router.push('/navbar')">
 <van-col span="6" class="marb20">
 <van-icon name="pending-deliver" />
 <div>NavBar 导航栏
</div>
 </van-col>
</a>

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

代码演示NavBar 导航栏：

基础方法：

<van-nav-bar
 title="独绽前端"
 left-text="返回"
 right-text="按钮"
 left-arrow
 @click-left="clickLeft"
 @click-right="clickRight"
 />
import { Toast } from 'vant';
clickLeft() {
 Toast("你按了返回键")
 },
 clickRight() {
 Toast("你按了按钮键")
 },

title: 标题

left-text: 左侧文字

right-text: 右侧文字

left-arrow：左侧箭头

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

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

自定义右侧内容：

<van-nav-bar
 title="独绽前端"
 left-text="返回"
 right-text="按钮"
 left-arrow
 @click-left="clickLeft"
 @click-right="clickRight"
 >
 <van-icon name="search" slot="right"/>
</van-nav-bar>

使用slot属性：

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

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

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