diff --git a/sanic_crudvue/frontend/build/webpack.base.config.js b/sanic_crudvue/frontend/build/webpack.base.config.js
index 2ca43f8..05db02b 100644
--- a/sanic_crudvue/frontend/build/webpack.base.config.js
+++ b/sanic_crudvue/frontend/build/webpack.base.config.js
@@ -48,5 +48,11 @@ module.exports = {
                 }]
             }
         ]
-    }
-}
\ No newline at end of file
+    },
+
+    resolve: {
+        alias: {
+            'vue$': 'vue/dist/vue'
+        }
+    },
+};
\ No newline at end of file
diff --git a/sanic_crudvue/frontend/package.json b/sanic_crudvue/frontend/package.json
index a3cc326..1cf073d 100644
--- a/sanic_crudvue/frontend/package.json
+++ b/sanic_crudvue/frontend/package.json
@@ -28,6 +28,7 @@
     "url-loader": "^0.5.8",
     "vue": "^2.2.6",
     "vue-loader": "^11.3.3",
+    "vue-router": "^2.7.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.2.6",
     "webpack": "^2.6.1",
diff --git a/sanic_crudvue/frontend/src/App.vue b/sanic_crudvue/frontend/src/App.vue
index cfd4793..95f781d 100644
--- a/sanic_crudvue/frontend/src/App.vue
+++ b/sanic_crudvue/frontend/src/App.vue
@@ -4,11 +4,12 @@
         <el-row class="container">
             <el-col :span="4" class="menu">
                 <db-sidebar></db-sidebar>
+
+
             </el-col>
             <el-col :span="20" class="content">
-                <db-filterinput></db-filterinput>
-                <db-table></db-table>
-
+                <router-view class="view one" name="one"></router-view>
+                <router-view class="view two" name="two"></router-view>
             </el-col>
 
 
@@ -29,19 +30,17 @@
 
     import DbHeader  from './components/DbHeader.vue'
     import DbSidebar from './components/DbSidebar.vue'
-    import DbFilterinput from './components/DbFilterinput.vue'
-    import DbTable from './components/DbTable.vue'
     import DbFooter from './components/DbFooter.vue'
+
     import ElRow from "element-ui/packages/row/src/row";
 
     export default {
         name: 'app',
         components: {
-            ElRow, DbHeader,
+            ElRow,
+            DbHeader,
             DbSidebar,
-            DbFilterinput,
-            DbTable,
-            DbFooter
+            DbFooter,
         },
     }
 
diff --git a/sanic_crudvue/frontend/src/components/DbMap.vue b/sanic_crudvue/frontend/src/components/DbMap.vue
new file mode 100644
index 0000000..f70c260
--- /dev/null
+++ b/sanic_crudvue/frontend/src/components/DbMap.vue
@@ -0,0 +1,16 @@
+<template>
+    <p  style="">{{msg}}</p>
+</template>
+
+<script>
+
+    export default {
+        name: 'db-map',
+        data() {
+            return {
+                msg: 'hello map'
+            }
+        }
+    }
+
+</script>
diff --git a/sanic_crudvue/frontend/src/components/DbSidebar.vue b/sanic_crudvue/frontend/src/components/DbSidebar.vue
index 0d46000..847c584 100644
--- a/sanic_crudvue/frontend/src/components/DbSidebar.vue
+++ b/sanic_crudvue/frontend/src/components/DbSidebar.vue
@@ -1,5 +1,18 @@
 <template>
-    <li class="el-menu-item is-active" style="">{{msg}}</li>
+    <el-menu default-active="0" class="el-menu-vertical-demo">
+        <el-menu-item index="0">
+
+            <router-link to="/dashboard"> {{menu1}} </router-link>
+
+        </el-menu-item>
+        <el-menu-item index="1">
+
+            <router-link to="/map"> {{menu2}}</router-link>
+
+        </el-menu-item>
+    </el-menu>
+
+
 </template>
 
 <script>
@@ -8,9 +21,10 @@
         name: 'db-sidebar',
         data() {
             return {
-                msg: 'Dashboard'
+                menu1: 'Dashboard',
+                menu2: 'Map'
             }
-        }
+        },
     }
 
 </script>
diff --git a/sanic_crudvue/frontend/src/main.js b/sanic_crudvue/frontend/src/main.js
index 669d687..70b584a 100644
--- a/sanic_crudvue/frontend/src/main.js
+++ b/sanic_crudvue/frontend/src/main.js
@@ -3,6 +3,7 @@
  */
 
 import Vue from 'vue'
+import Router from './router';
 import {
     Button,
     Select,
@@ -15,7 +16,9 @@ import {
     FormItem,
     Input,
     Dialog,
-    Option
+    Option,
+    Menu,
+    MenuItem
 } from 'element-ui'
 import App from './App.vue'
 import 'element-ui/lib/theme-default/index.css'
@@ -43,6 +46,9 @@ Vue.use(FormItem);
 Vue.use(Input);
 Vue.use(Dialog);
 Vue.use(Option);
+Vue.use(Menu);
+Vue.use(MenuItem);
+
 
 locale.use(lang);
 
@@ -50,6 +56,7 @@ locale.use(lang);
 
 // eslint-disable-next-line no-new
 new Vue({
+    router: Router,
     el: '#app',
     render: h => h(App)
 });
diff --git a/sanic_crudvue/frontend/src/router.js b/sanic_crudvue/frontend/src/router.js
new file mode 100644
index 0000000..0bdb6fc
--- /dev/null
+++ b/sanic_crudvue/frontend/src/router.js
@@ -0,0 +1,28 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+
+Vue.use(Router);
+
+const DbFilterinput = resolve => require(['./components/DbFilterinput.vue'], resolve);
+const DbTable = resolve => require(['./components/Dbtable.vue'], resolve);
+
+const DbMap = resolve => require(['./components/DbMap.vue'], resolve);
+
+export default new Router({
+        //mode: 'history',
+        routes: [
+            {
+                path: '/dashboard', components: {
+                one: DbFilterinput,
+                two: DbTable
+            },
+            },
+            {
+                path: '/map', components: {
+                one: DbMap
+            }
+            }
+        ]
+
+    }
+)
\ No newline at end of file