让页面上显示的内容更好看一点，我们可以重新再设计一下 .. 打开 index.html .. 在这个页面上我用了一个 css 框架叫 semanitc-ui .. 下面我们可以使用这个框架里的一些样式改造一下这个页面的显示 ..

先用一个 div .. 加上 ui.container ..

然后添加一个菜单 .. 一个 div，加上 .ui.two.item.menu ，两个项目的菜单 .. 里面的东西就是这两个 router-link .. 在它上面还得再添加一个 class ，需要一个 item 类 ..

再给 router-view 添加一个包装 .. 这个包装上面加上一个 ui.piled.segment .. 在页面上再添加点自定义的样式 .. 一组 style 标签 .. 在菜单的上边儿添加点外边距 .. .ui.item.menu ... 设置一下 margin-top .. 大小是 24px ..

再给 router-view 的包装上面多添加点内边距 .. .ui.segment .. 用一下 padding ，大小是 32px ..

active-class

router-link 组件会自动在当前激活状态下的项目上面添加表示激活的 css 类 .. 默认这个类的名字是 router-link-active .. 在我的用的 css 框架里，在菜单上面用的表示激活的 css 类的名字是 active .. 这里我们在 router-link 组件上，再添加一个 active-class，重新设置一下这个类的名字 .. 这里就是 active ..

在首页的这个 router-link 上面，再添加一个 exact .. 这样只有在地址完全匹配的情况下才会应用激活状态的 css 类 ..

然后再到浏览器上去预览一下 ..