下面可以再改造一下应用的导航栏 .. 回到编辑器 .. 打开应用默认的布局 .. layouts .. default.vue ..

导航栏上的文字标志可以链向应用的首页 .. 把 a 标签换成 nuxt-link 组件 .. 绑定一个 to .. 路由的名字是 index ..

再去掉这个 href 属性 ..

现在点击这个文字标志 .. 打开的就是应用的首页 ..

标志文字可以加粗一下 .. 添加一个 font-weight 设置成 bold ..

然后在导航栏上再添加一个菜单项目 ..

一个 ul .. navbar-nav .. mr-auto ..

菜单项目可以用 li 标签 .. 上面加上 nav-item .. 里面是一个链接 .. 用一下 nuxt-link 组件 .. 链接上的文字是 Posts ..

绑定 to .. 路由的 name 是 posts .. 链接上再添加一个类 .. nav-link ..

现在按一下导航栏上的 Posts .. 打开的就是一个内容列表页面 ..

检查一下这个菜单项目元素 .. 你会发现在激活的菜单项目上面，会使用一个 nuxt-link-active 这个类 .. 复制一下这个类的名字 ..

回到默认的布局 .. 再添加点样式 .. .navbar-light .navbar-nav 下面的 .nuxt-link-active ...复制一份 .. 逗号分隔一下 .. 还要设置的是 .nuxt-link-active:focus ..

把文字的颜色设置成黑色 ...

现在如果菜单项目是激活的状态，它的文字颜色就会变成黑色 ...