vue custom component&router

Author: xdai555

demo/vue_demo/myvue/src/App.vue

@@ -2,15 +2,28 @@
   <div id="app">
     <img src="./assets/logo.png">
     <router-view/>
-    <hello-world/>
   </div>
 </template>
 
 <script>
 import HelloWorld from './components/HelloWorld.vue'
+import myHello from './components/hello.vue'
+
+/*
+添加组件的流程：
+1. 在对应目录下新建组件，如 components/hello.vue
+2. 在 APP.vue 中引入组件，并且 export 出去
+3. 在 router/index.js 中引入组件，为组件添加路由信息
+
+===
+工作流程：
+main.js 中从 APP.vue 引入了 name 为 'App' 的组件并且注册了 router 组件，并把内容返回到了 index.heml 中 id="app" 的 div 里面，APP.vue 中模板部分使用 router-view 注册了所有的 url，这样前端可以通过不同的 url 进行页面的跳转。
+
+main.js 和 index.html 一般情况下是不用做改动的。
+ */
 
 export default {
-  components: { HelloWorld },
+  components: { HelloWorld, myHello },
   name: 'App'
 }
 </script>

demo/vue_demo/myvue/src/components/HelloWorld.vue

@@ -84,6 +84,7 @@
 </template>
 
 <script>
+// 对外暴露接口，接口里面的变量在自己的作用域里面有效
 export default {
   name: 'HelloWorld',
   data () {

demo/vue_demo/myvue/src/components/NotFound.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <h2>页面不存在...</h2>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'NotFound',
+  // 路由钩子，添加进入路由前的动作，可以进行操作。例如获取数据、拦截操作等
+  beforeRouteEnter (to, from, next) {
+    next()
+  },
+  methods: {
+    getData: function () {}
+  }
+}
+</script>

demo/vue_demo/myvue/src/components/hello.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+        自定义的 hello 页面。<br>
+        你好，{{ name }}。
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'myHello',
+  data () {
+    return {
+      name: 'Demo'
+    }
+  }
+}
+</script>

demo/vue_demo/myvue/src/router/index.js

@@ -1,15 +1,31 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import HelloWorld from '@/components/HelloWorld'
+import myHello from '@/components/hello'
+import NotFound from '@/components/NotFound'
 
 Vue.use(Router)
 
+/*  export default命令，为模块指定默认输出。 export default 命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。   */
 export default new Router({
   routes: [
     {
       path: '/',
       name: 'HelloWorld',
       component: HelloWorld
+    },
+    {
+      path: '/hello',
+      name: 'my-hello',
+      component: myHello
+    },
+    {
+      path: '/goHome',
+      redirect: '/'
+    },
+    {
+      path: '*',
+      component: NotFound
     }
   ]
 })