学习嵌套路由

20_脚手架/vue_code/27.src_路由基础示例/App.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <div class="row">
+      <Banner/>
+    </div>
+    <div class="row">
+      <div class="col-xs-2 col-xs-offset-2">
+        <div class="list-group">
+          <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>
+<!--          <a class="list-group-item active" href="./about.html">About</a>-->
+<!--          <a class="list-group-item" href="./home.html">Home</a>-->
+        </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>

20_脚手架/vue_code/27.src_路由基础示例/components/Banner.vue

@@ -0,0 +1,11 @@
+<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>

20_脚手架/vue_code/27.src_路由基础示例/main.js

@@ -0,0 +1,23 @@
+// 引入Vue
+import Vue from "vue";
+// 引入App
+import App from "./App";
+// 引入VueRouter
+import VueRouter from "vue-router";
+// 引入router
+import router from "@/router";
+
+// 设置Vue
+Vue.config.productionTip = false
+
+// 使用插件
+Vue.use(VueRouter)
+
+// 实例化Vue
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App),
+    router: router,
+}).$mount('#app')

20_脚手架/vue_code/27.src_路由基础示例/pages/About.vue

@@ -0,0 +1,21 @@
+<template>
+  <h2>我是About的内容</h2>
+</template>
+
+<script>
+export default {
+  name: "About",
+  mounted() {
+    console.log('About组件挂着完成', this)
+    window.aboutRoute = this.$route
+    window.aboutRouter = this.$router
+  },
+  beforeDestroy() {
+    console.log('About组件即将销毁')
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

20_脚手架/vue_code/27.src_路由基础示例/pages/Home.vue

@@ -0,0 +1,21 @@
+<template>
+  <h2>我是Home的内容</h2>
+</template>
+
+<script>
+export default {
+  name: "Home",
+  mounted() {
+    console.log('Home组件挂着完成', this)
+    window.homeRoute = this.$route
+    window.homeRouter = this.$router
+  },
+  beforeDestroy() {
+    console.log('Home组件即将销毁')
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

20_脚手架/vue_code/27.src_路由基础示例/router/index.js

@@ -0,0 +1,19 @@
+import VueRouter from "vue-router";
+
+// 引入组件
+import About from "@/pages/About.vue"
+import Home from "@/pages/Home.vue"
+
+// 创建一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/about',
+            component: About
+        },
+        {
+            path: '/home',
+            component: Home
+        },
+    ]
+})

20_脚手架/vue_code/28.src_嵌套路由/App.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <div class="row">
+      <Banner/>
+    </div>
+    <div class="row">
+      <div class="col-xs-2 col-xs-offset-2">
+        <div class="list-group">
+          <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>
+<!--          <a class="list-group-item active" href="./about.html">About</a>-->
+<!--          <a class="list-group-item" href="./home.html">Home</a>-->
+        </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>

20_脚手架/vue_code/28.src_嵌套路由/components/Banner.vue

@@ -0,0 +1,11 @@
+<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>

20_脚手架/vue_code/28.src_嵌套路由/main.js

@@ -0,0 +1,23 @@
+// 引入Vue
+import Vue from "vue";
+// 引入App
+import App from "./App";
+// 引入VueRouter
+import VueRouter from "vue-router";
+// 引入router
+import router from "@/router";
+
+// 设置Vue
+Vue.config.productionTip = false
+
+// 使用插件
+Vue.use(VueRouter)
+
+// 实例化Vue
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App),
+    router: router,
+}).$mount('#app')

20_脚手架/vue_code/28.src_嵌套路由/pages/About.vue

@@ -0,0 +1,21 @@
+<template>
+  <h2>我是About的内容</h2>
+</template>
+
+<script>
+export default {
+  name: "About",
+  mounted() {
+    console.log('About组件挂着完成', this)
+    window.aboutRoute = this.$route
+    window.aboutRouter = this.$router
+  },
+  beforeDestroy() {
+    console.log('About组件即将销毁')
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

20_脚手架/vue_code/28.src_嵌套路由/pages/Home.vue

@@ -0,0 +1,36 @@
+<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>
+      <ul>
+        <router-view></router-view>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Home",
+  mounted() {
+    console.log('Home组件挂着完成', this)
+    window.homeRoute = this.$route
+    window.homeRouter = this.$router
+  },
+  beforeDestroy() {
+    console.log('Home组件即将销毁')
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

20_脚手架/vue_code/28.src_嵌套路由/pages/Message.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <ul>
+      <li><a href="/message1">message001</a></li>
+      <li><a href="/message2">message002</a></li>
+      <li><a href="/message3">message003</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Message"
+}
+</script>

20_脚手架/vue_code/28.src_嵌套路由/pages/News.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <ul>
+      <li>news001</li>
+      <li>news002</li>
+      <li>news003</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "News"
+}
+</script>

20_脚手架/vue_code/28.src_嵌套路由/router/index.js

@@ -0,0 +1,31 @@
+import VueRouter from "vue-router";
+
+// 引入组件
+import About from "@/pages/About.vue"
+import Home from "@/pages/Home.vue"
+import News from "@/pages/News.vue"
+import Message from "@/pages/Message.vue";
+
+// 创建一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/about',
+            component: About
+        },
+        {
+            path: '/home',
+            component: Home,
+            children: [
+                {
+                    path: 'news',
+                    component: News,
+                },
+                {
+                    path: 'message',
+                    component: Message,
+                }
+            ]
+        },
+    ]
+})

20_脚手架/vue_code/src/pages/Home.vue

@@ -1,5 +1,20 @@
 <template>
-  <h2>我是Home的内容</h2>
+  <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>
+      <ul>
+        <router-view></router-view>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <script>

20_脚手架/vue_code/src/pages/Message.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <ul>
+      <li><a href="/message1">message001</a></li>
+      <li><a href="/message2">message002</a></li>
+      <li><a href="/message3">message003</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Message"
+}
+</script>

20_脚手架/vue_code/src/pages/News.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <ul>
+      <li>news001</li>
+      <li>news002</li>
+      <li>news003</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "News"
+}
+</script>

20_脚手架/vue_code/src/router/index.js

@@ -3,6 +3,8 @@ import VueRouter from "vue-router";
 // 引入组件
 import About from "@/pages/About.vue"
 import Home from "@/pages/Home.vue"
+import News from "@/pages/News.vue"
+import Message from "@/pages/Message.vue";
 
 // 创建一个路由器
 export default new VueRouter({
@@ -13,7 +15,17 @@ export default new VueRouter({
         },
         {
             path: '/home',
-            component: Home
+            component: Home,
+            children: [
+                {
+                    path: 'news',
+                    component: News,
+                },
+                {
+                    path: 'message',
+                    component: Message,
+                }
+            ]
         },
     ]
 })