kvue-router

Author: 57code

package-lock.json

@@ -10,11 +10,13 @@
   "dependencies": {
     "core-js": "^3.4.3",
     "element-ui": "^2.4.5",
-    "vue": "^2.6.10"
+    "vue": "^2.6.10",
+    "vue-router": "^3.2.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-service": "^4.1.0",
     "babel-eslint": "^10.0.3",
     "eslint": "^5.16.0",

package.json

@@ -1,28 +1,33 @@
 <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>
+    <!-- 路由出口 -->
+    <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;
   -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

@@ -29,6 +29,9 @@ export default {
     SlotExample,
     TreeExample
   },
+  mounted () {
+    this.$router
+  },
 }
 </script>
 

src/components/HelloWorld.vue

@@ -0,0 +1,29 @@
+import Vue from 'vue'
+import VueRouter from './kvue-router'
+import Home from '../views/Home.vue'
+
+// 1.VueRouter是一个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,95 @@
+// 我们的自己的插件
+// 实现⼀个插件
+// 实现VueRouter类
+// 处理路由选项
+// 监控url变化，hashchange
+// 响应这个变化
+// 实现install⽅法
+
+let Vue;
+
+// new VueRouter({routes})
+class KVueRouter {
+  constructor(options) {
+    this.$options = options;
+
+    // current必须是响应式的
+    // 如何做到？
+    // set只能在响应式对象上动态添加新属性
+    // new Vue({data() {
+    //   return {
+    //     key: value
+    //   }
+    // },})
+    Vue.util.defineReactive(
+      this,
+      "current",
+      window.location.hash.slice(1) || "/"
+    );
+    // this.current = window.location.hash.slice(1) || '/'
+    // 监控hashchange
+    window.addEventListener("hashchange", () => {
+      console.log(this.current);
+      this.current = window.location.hash.slice(1);
+    });
+  }
+}
+
+// vue插件：需要实现一个静态方法install
+// install(Vue, ...)
+KVueRouter.install = function(_Vue) {
+  Vue = _Vue;
+
+  // console.log(this);
+  // $router注册
+  // 延迟执行注册代码
+  // 混入：Vue.mixin({beforeCreate(){}})
+  Vue.mixin({
+    beforeCreate() {
+      // console.log(this); // this是组件实例
+      // 如果当前this是根组件，它选项中必有一个router
+      if (this.$options.router) {
+        Vue.prototype.$router = this.$options.router;
+      }
+    },
+  });
+
+  // 两个全局组件: router-link、router-view
+  Vue.component("router-link", {
+    props: {
+      to: {
+        type: String,
+        required: true,
+      },
+    },
+    render(h) {
+      // <router-link to="/about">xxx</router-link>
+      // <a href="#/about">xxx</a>
+      // return <a href={"#" + this.to}>{this.$slots.default}</a>
+      return h("a", { attrs: { href: "#" + this.to } }, this.$slots.default);
+    },
+  });
+  Vue.component("router-view", {
+    // render什么时候会执行？
+    // init执行一次
+    // 未来响应式数据变化会再次执行
+    render(h) {
+      // 1.获取hash部分#/about
+      // this.$router.$options.routes
+      // 2.根据上面地址获取对应组件配置About
+      // 3.h(About)
+      console.log(this.$router.$options);
+      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 KVueRouter;

src/krouter/kvue-router.js

@@ -1,11 +1,14 @@
 import Vue from 'vue'
 import App from './App.vue'
 import './plugins/element.js'
+// import router from './router'
+import router from './krouter'
 
 Vue.config.productionTip = false
 // 事件总线
 Vue.prototype.$bus = new Vue()
 
 new Vue({
-  render: h => h(App),
+  router,
+  render: h => h(App)
 }).$mount('#app')

src/main.js

@@ -0,0 +1,29 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from '../views/Home.vue'
+
+// 1.VueRouter是一个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/router/index.js

@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>

src/views/About.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="home">
+    <img alt="Vue logo" src="../assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import HelloWorld from '@/components/HelloWorld.vue'
+
+export default {
+  name: 'Home',
+  components: {
+    HelloWorld
+  }
+}
+</script>