[TOC] # 改造App.vue的導航代碼 我們需要先改造app.vue的導航代碼，來實現基本的導航功能。我們用<router-link>標簽增加了兩個新的導航鏈接 App.vue代碼 ~~~ <p>導航 ： <router-link to="/">首頁</router-link> | <router-link to="/hi">Hi頁面</router-link> | <router-link to="/hi/hi1">-Hi頁面1</router-link> | <router-link to="/hi/hi2">-Hi頁面2</router-link> </p> ~~~ 這時候我們再訪問主頁的時候導航欄就發生了變化。多出了兩個自導航：Hi頁面1 和 Hi頁面2 # 改寫components/Hi.vue頁面 把Hi.vue改成一個通用的模板，加入`<router-view>`標簽，給子模板提供插入位置。“Hi頁面1” 和 “Hi頁面2” 都相當于“Hi頁面”的子頁面，有點想繼承關系。我們在“Hi頁面”里加入`<router-view>`標簽 components/Hi.vue,就是第5行的代碼，其他代碼不變 ~~~ <template> <div class="hello"> <h1>{{ msg }}</h1> <router-view class="aaa"></router-view> </div> </template> <script> export default { name: 'hi', data () { return { msg: 'Hi, I am JSPang' } } } </script> <style scoped> </style> ~~~ # 在components目錄下新建兩個組件模板 Hi1.vue 和 Hi2.vue 新建的模板和Hi.vue沒有太多的差別，知識改變了data中message的值，也就是輸出的結果不太一樣了。 Hi1.vue ~~~ <template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'hi', data () { return { msg: 'Hi, I am Hi1!' } } } </script> <style scoped> </style> ~~~