nuxt项⽬实战之顶部导航菜单组件开发
nuxt.js 项⽬开发 - 顶部导航菜单组件开发
导读
1. ⾸先我们来分析下，最终案例的导航栏，这是⼀个移动端展⽰形式的顶部导航栏，这个导航菜单，采⽤的是bootstrapVue css ui 组件
库
⾥⾯的navbar组件
2. 我们需要单独创建⼀个菜单组件，并且把这个菜单组件放置在，公共的 layout 组件内部，接下来我们来制作菜单导航
3. 我们需要在components⽬录中新建⽬录AppHeader，再接着在AppHeader ⽬录中新建⼀个index.vue⽂件，我们在这个
index.vue⽂件中新建我们的菜单导航，编写基本的vue单⽂件组件的基本结构：
<template>
<div class="AppHeader">
</div>
</template>
<script>
export default{
name:'AppHeader'
}
</script>
<style scoped>
</style>
接下来，我们就来编写bootstapVue导航组件代码，
<b-navbar toggleable="lg" type="dark" variant="info">
</b-navbar>
toggleable：toggleable属性值是字符串或者布尔值，字符串默认有四个值，分别是sm，md，lg和xl；如果我们设置toggleable的值为true（或空字符串）将设置导航栏始终折叠，⽽将其设置为 false（默认值）将禁⽤折叠（始终展开）。
type：字符串，type属性的作⽤是控制导航栏的字体颜⾊，它有两个值，⼀个 dark，另外⼀个是light，默认值是light，我们来分别设置下，看⼀下效果
variant：字符串，主要是⽤于颜⾊，背景风格的切换，默认有⼀下⼏个值 primary，success， info，warning，danger，dark，或light。我们来分别设置下，来感受下是否有对应颜⾊的变化；好，我们从primary开始，我们把这个属性值替换⼀下
然后我们继续编写我们的logo 也可以叫做 title ，如何快速实现这样⼀个类似于logo 标题的这样⼀个效果呢？
我们可以使⽤b-navbar-brand这样⼀个组件，这个组件适⽤于产品应⽤的标题名称，好，我们来编写⼀下，⾸先我们先写⼀下注释，把我们的logo标题放在组建标签中，这个组件有⼀个href属性，我们可以让它跳转到我们的⾸页
<b-navbar-brand href="/">
Damiao Jokes
</b-navbar-brand>
好，我们来看下效果，这样呢，在左上⾓就出现了⼀个 Damiao Jokes 的 logo 标题；
接下来，我们就需要来实现这个可折叠的导航菜单列表，菜单列表我们可以使⽤<b-navbar-nav>这样⼀个组件实现我们的效果，这个组建标签适⽤于响应式且轻量级的导航（当然以及包括对下拉菜单的⽀持）。
写完<b-navbar-nav></b-navbar-nav>之后，接下来我们需要编写我们需要点击跳转的每个链接，这些链接的跳转，我们可以使⽤<b-nav-item>组建标签来代替，他有⼀个hef属性，可以⽤于路由或者链接跳转；接下来我们来分别设置下href，⾸页我们直接设置成 ‘/’
，jokes 页⾯我们设置成 /jokes , about 页⾯ 我们设置为 /about ，接下来我们来看下具体的效果；
这个链接效果已经出来了，接下来我们就需要新增⼀个可折叠按钮，我们可以使⽤<b-navbar-toggle></b-navbar-toggle>这样⼀个折叠按钮，他有⼀个属性target， 可以绑定对应菜单链接包裹组件<b-collapse>的元素ID，然后对 对应的菜单列表做折叠操作；好，我们<b-collapse>把我们的菜单组件包裹起来，给他设置⼀个id，jokes-collapse，把我们的效果基本展⽰出现了
<template>
<div>
<b-navbar toggleable="lg" type="dark" variant="info">
<!-- brand -->
<b-navbar-brand href="#">Damiao Jokes</b-navbar-brand>
<!-- nav toggle -->
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<!-- collapse -->
js导航栏下拉菜单
<!-- <b-collapse id="nav-collapse" is-nav> -->
<b-navbar-nav>
<b-nav-item href="/">Home</b-nav-item>
<b-nav-item href="/jokes">Jokes</b-nav-item>
<b-nav-item href="/about">About</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<!-- <b-navbar-nav class="ml-auto">
<b-nav-form>
<b-form-input size="sm" class="mr-sm-2" placeholder="Search" v-model="searchValue"></b-form-input>
<b-button size="sm" class="my-2 my-sm-0" @click="searchJokes">Search</b-button>
</b-nav-form>
</b-navbar-nav> -->
<!-- </b-collapse> -->
</b-navbar>
</div>
</template>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。