顶部导航条主要负责不同页面之间的导航，这个版本直接利用模板生成的导航条实现简单的导航，后续我们将介绍使用Menu组件增加功能。 App.vue文件使用router进行导航， 如果创建模板的时候没有增加vue-router功能， 需要手工添加 ~~~ cnpm i vue-router -S ~~~ 文件名称：/src/App.vue ~~~ <template> <div id="app"> <div id="nav"> <router-link to="/">首页</router-link> | <router-link to="/portal/news">团队动态</router-link> | <router-link to="/about">关于我们</router-link> </div> <router-view /> </div> </template> <style lang="scss"> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; // text-align: center; color: #2c3e50; } #nav { padding: 30px; a { font-weight: bold; color: #2c3e50; &.router-link-exact-active { color: #42b983; } } } </style> ~~~ ### 能力提升 阅读vue-router的官方文档，深入理解vue-roter的功能 uhttps://router.vuejs.org/zh/ https://www.jianshu.com/p/4c5c99abb864