頂部導航條主要負責不同頁面之間的導航，這個版本直接利用模板生成的導航條實現簡單的導航，后續我們將介紹使用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