Initial commit

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "start": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint"

src/components/HelloWorld.vue

 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest" target="_blank" rel="noopener">unit-jest</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
   </div>
 </template>
 

src/router/index.js

 import Vue from 'vue'
-import VueRouter from 'vue-router'
+import VueRouter from '../vueRouter'
 import Home from '../views/Home.vue'
 
 Vue.use(VueRouter)

src/vueRouter/index.js

+let _Vue = null
+export default class VueRouter {
+  static install(Vue) {
+    // 判断当前插件是否被安装
+    if( VueRouter.install.installed){
+      return
+    }
+    VueRouter.install.installed = true
+    // 把Vue构造函数记录到全局变量
+    _Vue = Vue
+    // 把创建Vue实例时候传入的router对象注入到vue实例中
+    // 
+    // 混入
+    _Vue.mixin({
+      beforeCreate() {
+        if(this.$options.router){
+          _Vue.prototype.$router = this.$options.router
+          this.$options.router.init()
+        }
+      }
+    })
+  }
+
+  constructor(options){
+    this.options = options
+    this.routeMap = {}
+    this.data = _Vue.observable({
+      current:  window.location.pathname
+    }) 
+  }
+
+  init(){
+    this.createRouteMap()
+    this.initComponents(_Vue)
+    this.initEvent()
+  }
+
+  createRouteMap(){
+    // 遍历素有的路由规则，把路由规则解析成键值对形式，储存到routeMap中
+    this.options.routes.forEach(route=>{
+      this.routeMap[route.path] = route.component
+    })
+  }
+
+  initComponents(Vue){
+    Vue.component('router-link', {
+      props:{
+        to: String
+      },
+      // template:'<a :href="to"><slot></slot></a>'
+      render(h){
+        return h('a', {
+          attrs:{
+            href: this.to
+          },
+          on:{
+            click: this.clickHandler
+          }
+        }, [this.$slots.default])
+      },
+      methods:{
+        clickHandler(e){
+          history.pushState({},'', this.to)
+          this.$router.data.current = this.to
+          e.preventDefault();
+        }
+      }
+    })
+
+    const self = this
+    Vue.component('router-view', {
+      render(h){
+        const component = self.routeMap[self.data.current]
+        return h(component)
+      }
+    })
+  }
+
+  initEvent(){
+    window.addEventListener('popstate',()=>{
+      this.data.current = window.location.pathname
+    })
+  }
+}
\ No newline at end of file