在 Nuxt 应用里如果想添加对路由的链接，可以使用 Nuxt 框架自带的 NuxtLink 组件。

打开 default 这个默认的布局组件，先用一组 NuxtLink 组件包装一下应用的名字，不用导入，可以直接使用 NuxtLink 组件。设置一下组件的 to 属性，它的值就是链接的地址，设置成一条斜线，表示应用的首页。

在 header 里的这个 nav 元素里再添加两个链接，一组 div，里面用一下 NuxtLink，链接文字是关于，设置一下 to 属性，值是 /about。复制一份，再添加一个链接，文字是 内容，链接的地址 /posts。

测试

在浏览器测试一下，现在页头这里会显示两个导航链接，点击 关于，打开的是 /about 这个地址，显示的就是关于这个页面，注意在切换页面的时候，并没有刷新页面。再试一下内容，打开的是 /posts 这个地址，显示的就是内容列表页面。再按一下应用的名字，可以回到应用的首页。

右键点击一个导航链接，选择 检查 。使用 NuxtLink 组件创建的链接用的就是 HTML 的 a 元素。再按一下这个链接，当前地址匹配这个链接地址的时候，在这个 a 元素的上面会添加表示激活状态的 css 类，默认这里有一个 router-link-active 还有一个 router-link-exact-active。使用这些类，我们可以给当前激活状态下的导航链接添加样式。

激活状态

打开默认布局使用的样式表，default.css，在这个样式表里，可以设计一下 .router-link-active 这个类的样式。把 font-weight 设置成 bold，让文字加粗，再把 color 设置成 black，文字颜色设置成黑色。

在浏览器观察一下当前激活状态下的链接，你会发现文字颜色会变成黑色并且会加粗显示。