diff --git a/20_脚手架/vue_code/package-lock.json b/20_脚手架/vue_code/package-lock.json
index e0dc108..35f9e62 100644
--- a/20_脚手架/vue_code/package-lock.json
+++ b/20_脚手架/vue_code/package-lock.json
@@ -14,6 +14,8 @@
         "pubsub-js": "^1.9.4",
         "vue": "^2.6.14",
         "vue-resource": "^1.3.5",
+        "vue-route": "^1.5.1",
+        "vue-router": "^3.6.5",
         "vuex": "^3.6.2"
       },
       "devDependencies": {
@@ -7930,6 +7932,27 @@
         "node": ">=6"
       }
     },
+    "node_modules/page": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/page/-/page-1.11.6.tgz",
+      "integrity": "sha512-P6e2JfzkBrPeFCIPplLP7vDDiU84RUUZMrWdsH4ZBGJ8OosnwFkcUkBHp1DTIjuipLliw9yQn/ZJsXZvarsO+g==",
+      "dependencies": {
+        "path-to-regexp": "~1.2.1"
+      }
+    },
+    "node_modules/page/node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmmirror.com/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
+    },
+    "node_modules/page/node_modules/path-to-regexp": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/path-to-regexp/-/path-to-regexp-1.2.1.tgz",
+      "integrity": "sha512-DBw9IhWfevR2zCVwEZURTuQNseCvu/Q9f5ZgqMCK0Rh61bDa4uyjPAOy9b55yKiPT59zZn+7uYKxmWwsguInwg==",
+      "dependencies": {
+        "isarray": "0.0.1"
+      }
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmmirror.com/param-case/-/param-case-3.0.4.tgz",
@@ -10386,6 +10409,19 @@
         "got": "^7.1.0"
       }
     },
+    "node_modules/vue-route": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/vue-route/-/vue-route-1.5.1.tgz",
+      "integrity": "sha512-RoeEWvSTk/Zasjx11En4XPyE1jXwuFQ4Itr4fzh1TOSMYefUddhhlHXmAGFFPn37J1YrEymm6sU/3IRTyu23Aw==",
+      "dependencies": {
+        "page": "^1.5.0"
+      }
+    },
+    "node_modules/vue-router": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",
+      "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -17301,6 +17337,29 @@
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
       "dev": true
     },
+    "page": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/page/-/page-1.11.6.tgz",
+      "integrity": "sha512-P6e2JfzkBrPeFCIPplLP7vDDiU84RUUZMrWdsH4ZBGJ8OosnwFkcUkBHp1DTIjuipLliw9yQn/ZJsXZvarsO+g==",
+      "requires": {
+        "path-to-regexp": "~1.2.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmmirror.com/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
+        },
+        "path-to-regexp": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmmirror.com/path-to-regexp/-/path-to-regexp-1.2.1.tgz",
+          "integrity": "sha512-DBw9IhWfevR2zCVwEZURTuQNseCvu/Q9f5ZgqMCK0Rh61bDa4uyjPAOy9b55yKiPT59zZn+7uYKxmWwsguInwg==",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
     "param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmmirror.com/param-case/-/param-case-3.0.4.tgz",
@@ -19192,6 +19251,19 @@
         "got": "^7.1.0"
       }
     },
+    "vue-route": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/vue-route/-/vue-route-1.5.1.tgz",
+      "integrity": "sha512-RoeEWvSTk/Zasjx11En4XPyE1jXwuFQ4Itr4fzh1TOSMYefUddhhlHXmAGFFPn37J1YrEymm6sU/3IRTyu23Aw==",
+      "requires": {
+        "page": "^1.5.0"
+      }
+    },
+    "vue-router": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",
+      "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
diff --git a/20_脚手架/vue_code/package.json b/20_脚手架/vue_code/package.json
index a81480f..94c96bc 100644
--- a/20_脚手架/vue_code/package.json
+++ b/20_脚手架/vue_code/package.json
@@ -14,6 +14,8 @@
     "pubsub-js": "^1.9.4",
     "vue": "^2.6.14",
     "vue-resource": "^1.3.5",
+    "vue-route": "^1.5.1",
+    "vue-router": "^3.6.5",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
diff --git a/20_脚手架/vue_code/public/index.html b/20_脚手架/vue_code/public/index.html
index e95a5c8..9595ac5 100644
--- a/20_脚手架/vue_code/public/index.html
+++ b/20_脚手架/vue_code/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-<!--    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">-->
+    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
diff --git a/20_脚手架/vue_code/src/App.vue b/20_脚手架/vue_code/src/App.vue
index 3dc2784..58ce7bf 100644
--- a/20_脚手架/vue_code/src/App.vue
+++ b/20_脚手架/vue_code/src/App.vue
@@ -1,19 +1,32 @@
 <template>
   <div>
-    <Count/>
-    <Person/>
+    <div class="row">
+      <div class="col-xs-offset-2 col-xs-8">
+        <div class="page-header"><h2>Vue Router Demo</h2></div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-2 col-xs-offset-2">
+        <div class="list-group">
+          <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
+          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
+<!--          <a class="list-group-item active" href="./about.html">About</a>-->
+<!--          <a class="list-group-item" href="./home.html">Home</a>-->
+        </div>
+      </div>
+      <div class="col-xs-6">
+        <div class="panel">
+          <div class="panel-body">
+            <router-view></router-view>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import Count from "@/components/Count.vue";
-import Person from "@/components/Person.vue";
-
 export default {
   name: "App",
-  components: {Person, Count},
-  mounted() {
-    console.log('App', this)
-  }
 }
 </script>
diff --git a/20_脚手架/vue_code/src/components/About.vue b/20_脚手架/vue_code/src/components/About.vue
new file mode 100644
index 0000000..f1830d7
--- /dev/null
+++ b/20_脚手架/vue_code/src/components/About.vue
@@ -0,0 +1,13 @@
+<template>
+  <h2>我是About的内容</h2>
+</template>
+
+<script>
+export default {
+  name: "About"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/components/Count.vue b/20_脚手架/vue_code/src/components/Count.vue
deleted file mode 100644
index 8967479..0000000
--- a/20_脚手架/vue_code/src/components/Count.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <div>
-    <h1>当前求和为: {{ sum }}</h1>
-    <h3>当前求和放大10倍后为: {{ bigSum }}</h3>
-    <h3>我在{{ school }}，学{{ subject }}</h3>
-    <h3 style="color: red">Person组件的总人数是：{{ personList.length }}</h3>
-    <select v-model.number="n">
-      <option value="1">1</option>
-      <option value="2">2</option>
-      <option value="3">3</option>
-    </select>
-    <button @click="add(n)">+</button>
-    <button @click="sub(n)">-</button>
-    <button @click="addOdd(n)">当前求和为奇数再加</button>
-    <button @click="addWait(n)">等一等再加</button>
-  </div>
-</template>
-
-<script>
-import {mapState, mapGetters, mapMutations, mapActions} from "vuex";
-
-export default {
-  name: "Count",
-  data() {
-    return {
-      n: 1
-    }
-  },
-  mounted() {
-    console.log('Count', this)
-  },
-
-  computed: {
-    ...mapState('countOptions', ['sum', 'school', 'subject']),  // 数组写法
-    ...mapState('personOptions', ['personList']),  // 数组写法
-    // ...mapState({sum: 'sum', school: 'school', subject: 'subject'}),  // 对象写法
-
-    ...mapGetters('countOptions', {bigSum: 'bigSum'})
-  },
-
-  methods: {
-    ...mapMutations('countOptions', {add: 'vuexAdd', sub: 'vuexSub'}),  // 对象写法
-    // ...mapMutations(['vuexAdd', 'vuexSub']),   //数组写法
-
-    ...mapActions('countOptions', {addOdd: 'vuexAddOdd', addWait: 'vuexAddWait'}),
-  },
-}
-</script>
-
-<style>
-button {
-  margin-left: 5px
-}
-</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/components/Home.vue b/20_脚手架/vue_code/src/components/Home.vue
new file mode 100644
index 0000000..ea7fc76
--- /dev/null
+++ b/20_脚手架/vue_code/src/components/Home.vue
@@ -0,0 +1,13 @@
+<template>
+  <h2>我是Home的内容</h2>
+</template>
+
+<script>
+export default {
+  name: "Home"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/components/Person.vue b/20_脚手架/vue_code/src/components/Person.vue
deleted file mode 100644
index 7af6dde..0000000
--- a/20_脚手架/vue_code/src/components/Person.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <div>
-    <h1>人员列表</h1>
-    <h3 style="color: red">Count组件的求和为：{{sum}}</h3>
-    <h3>列表中第一个人的名字： {{firstPersonName}}</h3>
-    <input type="text" placeholder="请输入名字" v-model="name">
-    <button @click="add">添加</button>
-    <button @click="addWang">添加一个姓王的人</button>
-    <button @click="addPersonServer">添加一个人名字随机</button>
-    <ul>
-      <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
-    </ul>
-  </div>
-</template>
-
-<script>
-import {mapState} from 'vuex'
-import {nanoid} from "nanoid";
-
-export default {
-  name: "Person",
-  data() {
-    return {
-      name:''
-    }
-  },
-  computed: {
-    personList() {
-      return this.$store.state.personOptions.personList
-    },
-    sum() {
-      return this.$store.state.countOptions.sum
-    },
-    firstPersonName() {
-      return this.$store.getters["personOptions/firstPersonName"]
-    }
-
-  },
-  methods: {
-    add() {
-      const personObj = {id: nanoid(), name:this.name}
-      this.$store.commit('personOptions/ADD_PERSON', personObj)
-      this.name = ''
-    },
-    addWang() {
-      const personObj = {id: nanoid(), name:this.name}
-      this.$store.dispatch('personOptions/addPersonWang', personObj)
-      this.name = ''
-    },
-    addPersonServer() {
-      this.$store.dispatch('personOptions/addPersonServer')
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/main.js b/20_脚手架/vue_code/src/main.js
index abf3e27..9c406ac 100644
--- a/20_脚手架/vue_code/src/main.js
+++ b/20_脚手架/vue_code/src/main.js
@@ -2,16 +2,16 @@
 import Vue from "vue";
 // 引入App
 import App from "./App";
-// 引入插件
-import vueResource from "vue-resource";
-
-import store from './store'
+// 引入VueRouter
+import VueRouter from "vue-router";
+// 引入router
+import router from "@/router";
 
 // 设置Vue
 Vue.config.productionTip = false
 
 // 使用插件
-Vue.use(vueResource)
+Vue.use(VueRouter)
 
 // 实例化Vue
 new Vue({
@@ -19,8 +19,5 @@ new Vue({
         App
     },
     render: h => h(App),
-    store,
-    beforeCreate() {
-        Vue.prototype.$bus = this  // 安装全局事件总线
-    }
+    router: router,
 }).$mount('#app')
diff --git a/20_脚手架/vue_code/src/router/index.js b/20_脚手架/vue_code/src/router/index.js
new file mode 100644
index 0000000..f8af21b
--- /dev/null
+++ b/20_脚手架/vue_code/src/router/index.js
@@ -0,0 +1,19 @@
+import VueRouter from "vue-router";
+
+// 引入组件
+import About from "../components/About.vue"
+import Home from "../components/Home.vue"
+
+// 创建一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/about',
+            component: About
+        },
+        {
+            path: '/home',
+            component: Home
+        },
+    ]
+})
diff --git a/20_脚手架/vue_code/src/store/count.js b/20_脚手架/vue_code/src/store/count.js
deleted file mode 100644
index b30a58f..0000000
--- a/20_脚手架/vue_code/src/store/count.js
+++ /dev/null
@@ -1,35 +0,0 @@
-// count相关的设置
-export default {
-    namespaced: true,
-    actions: {
-        vuexAddOdd(context, value) {
-            if (context.state.sum % 2) {
-                context.commit('vuexAdd', value)
-            }
-        },
-        vuexAddWait(context, value) {
-            setTimeout(() => {
-                    context.commit('vuexAdd', value)
-                }, 1000
-            )
-        }
-    },
-    mutations: {
-        vuexAdd(state, value) {
-            state.sum += value
-        },
-        vuexSub(state, value) {
-            state.sum -= value
-        },
-    },
-    state: {
-        sum: 0,
-        school: '修仙学院',
-        subject: '修仙',
-    },
-    getters: {
-        bigSum(state) {
-            return state.sum * 10
-        }
-    }
-}
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/store/index.js b/20_脚手架/vue_code/src/store/index.js
deleted file mode 100644
index a11063b..0000000
--- a/20_脚手架/vue_code/src/store/index.js
+++ /dev/null
@@ -1,72 +0,0 @@
-// 用于创建vue中核心 store
-// 引入Vue
-import Vue from "vue";
-// 引入vuex
-import Vuex from 'vuex'
-
-import countOptions from './count'
-import personOptions from './person'
-
-// 应用Vuex插件
-Vue.use(Vuex)
-
-// 准备actions-用于响应组件中的动作,业务逻辑需要写到actions中
-// const actions = {
-//     vuexAddOdd(context, value) {
-//         if (context.state.sum % 2) {
-//             context.commit('vuexAdd', value)
-//         }
-//     },
-//     vuexAddWait(context, value) {
-//         setTimeout(() => {
-//                 context.commit('vuexAdd', value)
-//             }, 1000
-//         )
-//     }
-// }
-
-//准备mutations-用于操作数据
-// const mutations = {
-//     vuexAdd(state, value) {
-//         state.sum += value
-//     },
-//     vuexSub(state, value) {
-//         state.sum -= value
-//     },
-//     ADD_PERSON(state, personObj) {
-//         state.personList.unshift(personObj)
-//     }
-// }
-
-//准备state-用于存储数据
-// const state = {
-//     sum: 0,
-//     school: '修仙学院',
-//     subject: '修仙',
-//     personList: [
-//         {id: '001', name: '张三'}
-//     ]
-// }
-
-// getters 用于对state中的数据进行加工，类似用computed
-// const getters = {
-//     bigSum(state) {
-//         return state.sum * 10
-//     }
-// }
-
-// 创建并导出store
-// export default new Vuex.Store({
-//     actions,
-//     mutations,
-//     state,
-//     getters
-// })
-
-// namespace形式的导出
-export default new Vuex.Store({
-    modules: {
-        countOptions: countOptions,
-        personOptions: personOptions,
-    }
-})
diff --git a/20_脚手架/vue_code/src/store/person.js b/20_脚手架/vue_code/src/store/person.js
deleted file mode 100644
index 501b29f..0000000
--- a/20_脚手架/vue_code/src/store/person.js
+++ /dev/null
@@ -1,42 +0,0 @@
-// count相关的设置
-
-import axios from "axios";
-import {nanoid} from "nanoid";
-export default {
-    namespaced: true,
-    actions: {
-        addPersonWang(context, value) {
-            if (value.name.indexOf('王') === 0) {
-                context.commit('ADD_PERSON', value)
-            }else{
-                alert('添加的人必须姓王！')
-            }
-        },
-        addPersonServer(context) {
-            axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
-                response => {
-                    context.commit('ADD_PERSON', {id: nanoid(), name: response.data})
-
-                },
-                error => {
-                    alert(error.message)
-                }
-            )
-        }
-    },
-    mutations: {
-        ADD_PERSON(state, personObj) {
-            state.personList.unshift(personObj)
-        }
-    },
-    state: {
-        personList: [
-            {id: '001', name: '张三'}
-        ]
-    },
-    getters: {
-        firstPersonName(state) {
-            return state.personList[0].name
-        }
-    }
-}
\ No newline at end of file