[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> ~~~