完善代码结构

20_脚手架/vue_code/src/App.vue

@@ -1,9 +1,7 @@
 <template>
   <div>
     <div class="row">
-      <div class="col-xs-offset-2 col-xs-8">
+      <Banner/>
-        <div class="page-header"><h2>Vue Router Demo</h2></div>
-      </div>
     </div>
     <div class="row">
       <div class="col-xs-2 col-xs-offset-2">
@@ -26,7 +24,9 @@
 </template>
 
 <script>
+import Banner from "@/components/Banner.vue";
 export default {
   name: "App",
+  components: {Banner}
 }
 </script>

20_脚手架/vue_code/src/components/About.vue

@@ -1,13 +0,0 @@
-<template>
-  <h2>我是About的内容</h2>
-</template>
-
-<script>
-export default {
-  name: "About"
-}
-</script>
-
-<style scoped>
-
-</style>

20_脚手架/vue_code/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/src/components/Home.vue

@@ -1,13 +0,0 @@
-<template>
-  <h2>我是Home的内容</h2>
-</template>
-
-<script>
-export default {
-  name: "Home"
-}
-</script>
-
-<style scoped>
-
-</style>

20_脚手架/vue_code/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/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/src/router/index.js

@@ -1,8 +1,8 @@
 import VueRouter from "vue-router";
 
 // 引入组件
-import About from "../components/About.vue"
+import About from "@/pages/About.vue"
-import Home from "../components/Home.vue"
+import Home from "@/pages/Home.vue"
 
 // 创建一个路由器
 export default new VueRouter({