completed

Author: 57code

package-lock.json

@@ -10,11 +10,15 @@
   "dependencies": {
     "core-js": "^3.4.3",
     "element-ui": "^2.4.5",
-    "vue": "^2.6.10"
+    "vue": "^2.6.10",
+    "vue-router": "^3.2.0",
+    "vuex": "^3.4.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.1.0",
     "@vue/cli-plugin-eslint": "^4.1.0",
+    "@vue/cli-plugin-router": "^4.5.13",
+    "@vue/cli-plugin-vuex": "^4.5.13",
     "@vue/cli-service": "^4.1.0",
     "babel-eslint": "^10.0.3",
     "eslint": "^5.16.0",

package.json

@@ -1,28 +1,36 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <div id="nav">
+      <router-link to="/">Home</router-link> |
+      <router-link to="/about">About</router-link>
+    </div>
+    <p @click="$store.commit('add')">{{ $store.state.counter }}</p>
+    <p @click="$store.dispatch('add')">async{{ $store.state.counter }}</p>
+    <p>double: {{$store.getters.doubleCounter}}</p>
+    <!-- 占位符 -->
+    <router-view />
   </div>
 </template>
 
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'app',
-  components: {
-    HelloWorld
-  }
-}
-</script>
-
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+}
+
+#nav {
+  padding: 30px;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
 }
 </style>

src/App.vue

@@ -0,0 +1,30 @@
+import Vue from 'vue'
+import VueRouter from './kvue-router'
+import Home from '../views/Home.vue'
+
+// 引入插件
+// use方法将来会调用install方法
+Vue.use(VueRouter)
+
+// 路由映射表
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home,
+  },
+  {
+    path: '/about',
+    name: 'About',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  }
+]
+
+const router = new VueRouter({
+  routes
+})
+
+export default router

src/krouter/index.js

@@ -0,0 +1,94 @@
+let Vue;
+
+// vue插件编写
+// 实现一个install方法
+class VueRouter {
+  constructor(options) {
+    console.log(Vue);
+    this.$options = options;
+
+    // 保存当前hash到current
+    // current应该是响应式的
+    // 给指定对象定义响应式属性
+    Vue.util.defineReactive(
+      this,
+      "current",
+      window.location.hash.slice(1) || "/"
+    );
+    // this.current = "/";
+
+    // 监控hashchange
+    window.addEventListener("hashchange", () => {
+      // #/about => /about
+      this.current = window.location.hash.slice(1);
+    });
+  }
+}
+
+// 形参1是Vue构造函数: 目的是便于扩展
+VueRouter.install = function(_Vue) {
+  Vue = _Vue;
+
+  // 1. 将$router注册一下
+  // 下面代码延迟未来某个时刻：根实例创建时
+  Vue.mixin({
+    beforeCreate() {
+      // 只需要根实例时执行一次
+      if (this.$options.router) {
+        // 希望将来任何组件都可以通过$router
+        // 访问路由器实例
+        Vue.prototype.$router = this.$options.router;
+      }
+    },
+  });
+
+  // 2. 注册两个全局组件：router-Link, router-view
+  Vue.component("router-link", {
+    // template: '<a>router-link</a>'
+    props: {
+      to: {
+        type: String,
+        required: true,
+      },
+    },
+    render(h) {
+      // h就是createElement()
+      // 作用：返回一个虚拟dom
+      // <router-link to="/about">abc</router-link>
+      // return <a href={"#" + this.to}>{this.$slots.default}</a>;
+      // 获取插槽内容：this.$slots.default
+      return h(
+        "a",
+        {
+          attrs: {
+            href: "#" + this.to,
+          },
+        },
+        this.$slots.default
+      );
+    },
+  });
+
+  Vue.component("router-view", {
+    // vue.runtime.js
+    // vue.js compiler -> template -> render()
+    // template: '<div>router-view</div>'
+    render(h) {
+      // 可以传入一个组件直接渲染
+      // 思路：如果可以根据url的hash部分动态匹配这个要渲染的组件
+      // window.location.hash
+      // console.log(this.$router.$options.routes);
+      // console.log(this.$router.current);
+      let component = null;
+      const route = this.$router.$options.routes.find(
+        (route) => route.path === this.$router.current
+      );
+      if (route) {
+        component = route.component
+      }
+      return h(component);
+    },
+  });
+};
+
+export default VueRouter;

src/krouter/kvue-router.js

@@ -0,0 +1,30 @@
+import Vue from 'vue'
+import Vuex from './kvuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  // state应该是响应式对象
+  state: {
+    counter: 0
+  },
+  mutations: {
+    // state从何而来
+    add(state) {
+      state.counter++
+    }
+  },
+  actions: {
+    // 上下文从何而来，长什么样
+    add({commit}) {
+      setTimeout(() => {
+        commit('add')
+      }, 1000);
+    }
+  },
+  getters: {
+    doubleCounter: state => {
+      return state.counter * 2;
+    }
+  }
+})