Vue-router多级路由

直接通过案例的形式来演示多级路由的用法

1. 文件结构
   

2. Banner.vue

   <template><div class="col-xs-offset-2 col-xs-8"><div class="page-header"><h2>Vue Router Demo</h2></div></div>
   </template><script>
   export default {name:'Banner'
   }
   </script><style></style>
   

3. About.vue

   <template><h2>我是About的内容</h2>
   </template><script>
   export default {name:'About',mounted() {console.log(this)},
   }
   </script>
   

4. Home.vue

   <template><div><h2>Home组件内容</h2><div><ul class="nav nav-tabs"><li><router-link class="list-group-item" active-class="active" to="/home/news">News</router-link></li><li><router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link></li></ul><router-view></router-view></div></div>
   </template><script>
   export default {name:'Home',mounted() {console.log(this)},
   }
   </script>

5. Message.vue

   <template><div><ul><li><a href="/message1">message001</a>&nbsp;&nbsp;</li><li><a href="/message2">message002</a>&nbsp;&nbsp;</li><li><a href="/message/3">message003</a>&nbsp;&nbsp;</li></ul></div>
   </template><script>
   export default {name:'Message'
   }
   </script>

6. News.vue

   <template><ul><li>news001</li><li>news002</li><li>news003</li></ul>
   </template><script>
   export default {name:'News'
   }
   </script>

7. router->index.js

   //该文件专门用于创建整个应用的路由器
   import VueRouter from "vue-router";
   //引入组件
   import About from '../pages/About'
   import Home from '../pages/Home'
   import Message from '../pages/Message'
   import News from '../pages/News'
   //创建并暴露一个路由器
   export default new VueRouter({routes:[{path:'/about',component:About},//一级路由{path:'/home',component:Home,//二级路由（子路由）children:[{path:'news',component:News},{path:'message',component:Message}]}]
   })
   

8. App.vue

   <template>
   <div><div class="row"><Banner/></div><div class="row"><div class="col-xs-2 col-xs-offset-2"><div class="list-group"><!-- 原始html我们使用a标签实现页面的跳转 --><!-- <a class="list-group-item" href="./about.html">About</a><a class="list-group-item active" href="./home.html">Home</a> --><!-- Vue中使用router-link标签实现路由的切换 --><router-link class="list-group-item" active-class="active" to="/about">About</router-link><router-link class="list-group-item" active-class="active" to="/home">Home</router-link></div></div><div class="col-xs-6"><div class="panel"><div class="panel-body"><!-- 指定组件的呈现位置 --><router-view></router-view></div></div></div></div></div>
   </template><script>
   import Banner from './components/Banner.vue';
   export default {name:"App",components:{Banner}
   }
   </script>

9. main.js

   import Vue from "vue"
   import App from "./App.vue"
   //引入Vue-router路由器插件
   import VueRouter from "vue-router";
   //引入路由器
   import router from "./router/index";
   //应用插件
   Vue.use(VueRouter)
   Vue.config.productionTip=false;
   const vm = new Vue({el:"#app",render:h=>h(App),router:router})
   // console.log(vm)