add: users & books route and use dynamic syntax import

.babelrc

@@ -12,6 +12,7 @@
     "stage-2"
   ],
   "plugins": [
+    "syntax-dynamic-import",
     "transform-vue-jsx",
     "transform-runtime",
     [

package.json

@@ -24,6 +24,7 @@
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-loader": "^7.1.1",
     "babel-plugin-component": "^1.1.1",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",

src/components/books.vue

@@ -0,0 +1,20 @@
+<template>
+  <el-main>
+    <h2>Books</h2>
+    <el-main>
+
+    </el-main>
+  </el-main>
+</template>
+
+<style>
+</style>
+
+<script>
+export default {
+  name: 'Books'
+}
+</script>
+
+<style scoped>
+</style>

src/components/home.vue

@@ -30,18 +30,4 @@ export default {
 </script>
 
 <style scoped>
-p {
-  line-height: 1.5;
-  font-size: 1.2em;
-}
-ul > li {
-  list-style-type: none;
-  font-size: 1.2em;
-  line-height: 1.8;
-  background: #f5ebff;
-  color: #9d4de7;
-  padding: 10px 20px;
-  margin-bottom: 10px;
-  border-radius: 5px;
-}
 </style>

src/components/users.vue

@@ -0,0 +1,20 @@
+<template>
+  <el-main>
+    <h2>Users</h2>
+    <el-main>
+
+    </el-main>
+  </el-main>
+</template>
+
+<style>
+</style>
+
+<script>
+export default {
+  name: 'Users'
+}
+</script>
+
+<style scoped>
+</style>

src/router/index.js

@@ -1,10 +1,10 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import home from '@/components/home'
 
 Vue.use(Router)
 
 export default new Router({
+  mode: 'history',
   scrollBehavior(to, from, savedPosition) {
     if (savedPosition) {
       return savedPosition
@@ -16,7 +16,17 @@ export default new Router({
     {
       path: '/',
       name: 'Home',
-      component: home
+      component: () => import('@/components/home')
+    },
+    {
+      path: '/users',
+      name: 'Users',
+      component: () => import('@/components/users')
+    },
+    {
+      path: '/books',
+      name: 'Books',
+      component: () => import('@/components/books')
     }
   ]
 })