嵌套路由

src/router/index.js

@@ -1,14 +1,25 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
 import Test from '@/view/test'
+import Title1 from '@/view/title1'
+import Title2 from '@/view/title2'
 
 Vue.use(Router)
 
 export default new Router({
   routes: [{
-    path: '/test/:testId',
+    path: '/test',
     name: 'test',
     component: Test,
+    children: [{
+    	path: 'title1',
+    	name: 'title1',
+    	component: Title1
+    },
+    {
+    	path: 'title2',
+    	name: 'title2',
+    	component: Title2
+    }]
   }]
 })

src/view/test.vue

@@ -1,16 +1,17 @@
 <template>
   <div class="test">
+  	<!-- 动态路由 -->
   	This is id: {{$route.params.testId}}
+
+  	<!-- 嵌套路由 -->
+  	<router-link to="/test/title1">标题1</router-link>
+  	<router-link to="/test/title2">标题2</router-link>
+  	<router-view></router-view>
   </div>
 </template>
 <script>
 export default {
-  data() {
-    return {
-      msg: 'hello vue'
-    }
-  }
-}
 
+}
 </script>
 <style scoped></style>

src/view/title1.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="title1">
+  	这里是title1的内容
+  </div>
+</template>
+<script>
+export default {
+}
+
+</script>
+<style scoped></style>

src/view/title2.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="title2">
+  	这里是title2的内容
+  </div>
+</template>
+<script>
+export default {
+}
+
+</script>
+<style scoped></style>