diff --git a/.gitignore b/.gitignore
index 9a8d54baf..1f1130e7f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ build
 tests_output
 selenium-debug.log
 TODOs.md
+.vscode
diff --git a/package.json b/package.json
index 60a2fb93a..529c9c43d 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "lodash.debounce": "^4.0.6",
     "lodash.groupby": "^4.6.0",
     "vue": "^2.0.0",
+    "vue-router": "^2.3.0",
     "vuex": "^2.0.0"
   }
 }
diff --git a/shells/chrome/webpack.config.js b/shells/chrome/webpack.config.js
index 8b1f24c25..c1863f2b1 100644
--- a/shells/chrome/webpack.config.js
+++ b/shells/chrome/webpack.config.js
@@ -18,8 +18,8 @@ module.exports = {
     detector: './src/detector.js'
   },
   output: {
-    path: __dirname + '/build',
-    filename: '[name].js',
+    path: path.join(__dirname, '/build'),
+    filename: '[name].js'
   },
   resolve: {
     alias
@@ -28,7 +28,7 @@ module.exports = {
     rules: [
       {
         test: /\.js$/,
-        loader:  'buble-loader',
+        loader: 'buble-loader',
         exclude: /node_modules|vue\/dist|vuex\/dist/,
         options: bubleOptions
       },
diff --git a/shells/dev/target/index.js b/shells/dev/target/index.js
index 7d6197cec..bf9ba0343 100644
--- a/shells/dev/target/index.js
+++ b/shells/dev/target/index.js
@@ -6,22 +6,72 @@ import Counter from './Counter.vue'
 import Events from './Events.vue'
 import MyClass from './MyClass.js'
 
-let items = []
+import IndexRoute from './router/IndexRoute.vue'
+import RouteOne from './router/RouteOne.vue'
+import RouteTwo from './router/RouteTwo.vue'
+import RouteWithParams from './router/RouteWithParams.vue'
+import NamedRoute from './router/NamedRoute.vue'
+import RouteWithQuery from './router/RouteWithQuery.vue'
+import RouteWithBeforeEnter from './router/RouteWithBeforeEnter.vue'
+import RouteWithAlias from './router/RouteWithAlias.vue'
+import RouteWithProps from './router/RouteWithProps.vue'
+import ParentRoute from './router/ParentRoute.vue'
+import ChildRoute from './router/ChildRoute.vue'
+
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const DynamicComponent = {
+  template: '<div>Hello from dynamic component</div>'
+}
+
+const routes = [
+  { path: '/route-one', component: RouteOne },
+  { path: '/route-two', component: RouteTwo },
+  { path: '/route-with-params/:username/:id', component: RouteWithParams },
+  { path: '/route-named', component: NamedRoute, name: 'NamedRoute' },
+  { path: '/route-with-query', component: RouteWithQuery },
+  { path: '/route-with-before-enter', component: RouteWithBeforeEnter, beforeEnter: (to, from, next) => {
+    next()
+  }},
+  { path: '/route-with-redirect', redirect: '/route-one' },
+  { path: '/route-with-alias', component: RouteWithAlias, alias: '/this-is-the-alias' },
+  { path: '/route-with-dynamic-component', component: DynamicComponent, props: true },
+  { path: '/route-with-props', component: RouteWithProps, props: {
+    username: 'My Username',
+    id: 99
+  }},
+  { path: '/route-with-props-default', component: RouteWithProps },
+  { path: '/route-parent', component: ParentRoute,
+    children: [
+      { path: '/route-child', component: ChildRoute }
+    ]
+  }
+]
+
+const router = new VueRouter({
+  routes
+})
+
+const items = []
 for (var i = 0; i < 100; i++) {
   items.push({ id: i })
 }
 
-let circular = {}
+const circular = {}
 circular.self = circular
 
 new Vue({
   store,
+  router,
   render (h) {
     return h('div', null, [
       h(Counter),
-      h(Target, {props:{msg: 'hi', ins: new MyClass()}}),
+      h(Target, {props: {msg: 'hi', ins: new MyClass()}}),
       h(Other),
-      h(Events)
+      h(Events),
+      h(IndexRoute)
     ])
   },
   data: {
diff --git a/shells/dev/target/router/ChildRoute.vue b/shells/dev/target/router/ChildRoute.vue
new file mode 100644
index 000000000..3337f2ee4
--- /dev/null
+++ b/shells/dev/target/router/ChildRoute.vue
@@ -0,0 +1,9 @@
+<template>
+  <h2>Child route</h2>
+</template>
+
+<script>
+export default {
+
+}
+</script>
diff --git a/shells/dev/target/router/IndexRoute.vue b/shells/dev/target/router/IndexRoute.vue
new file mode 100644
index 000000000..926e63a59
--- /dev/null
+++ b/shells/dev/target/router/IndexRoute.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <p><router-link to="/route-one">Go to Route One</router-link></p>
+    <p><router-link to="/route-two">Go to Route Two</router-link></p>
+    <p><router-link to="/route-with-params/markussorg/5">Go to route with params</router-link></p>
+    <p><router-link to="/route-named">Go to named route</router-link></p>
+    <p><router-link to="/route-with-query?el=value&test=true">Go to route with query</router-link></p>
+    <p><router-link to="/route-with-before-enter">Go to route with before enter</router-link></p>
+    <p><router-link to="/route-with-redirect">Go to route with redirect</router-link></p>
+    <p><router-link to="/this-is-the-alias">Go to route with alias</router-link></p>
+    <p><router-link to="/route-with-dynamic-component">Go to route with dyn. component</router-link></p>
+    <p><router-link to="/route-with-props">Go to route with props</router-link></p>
+    <p><router-link to="/route-with-props-default">Go to route with props (default)</router-link></p>
+    <p><router-link to="/route-parent">Go to route parent</router-link></p>
+    <p><router-link to="/route-child">Go to route child</router-link></p>
+    <router-view></router-view>
+    <p><button @click="addRoutes">Add new routes</button></p>
+   </div>
+</template>
+
+<script>
+import RouteOne from './RouteOne.vue'
+
+export default {
+  methods: {
+    addRoutes () {
+      this.$router.addRoutes([
+        { path: '/new-route', component: RouteOne }
+      ])
+    } 
+  }
+}
+</script>
diff --git a/shells/dev/target/router/NamedRoute.vue b/shells/dev/target/router/NamedRoute.vue
new file mode 100644
index 000000000..e68fd580b
--- /dev/null
+++ b/shells/dev/target/router/NamedRoute.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <p>Hello named route</p>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
\ No newline at end of file
diff --git a/shells/dev/target/router/ParentRoute.vue b/shells/dev/target/router/ParentRoute.vue
new file mode 100644
index 000000000..27138e6d6
--- /dev/null
+++ b/shells/dev/target/router/ParentRoute.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="parent">
+    <h2>Parent</h2>
+    <router-view class="child"></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
diff --git a/shells/dev/target/router/RouteOne.vue b/shells/dev/target/router/RouteOne.vue
new file mode 100644
index 000000000..b131fd159
--- /dev/null
+++ b/shells/dev/target/router/RouteOne.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <p>Hello from route 1</p>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
diff --git a/shells/dev/target/router/RouteTwo.vue b/shells/dev/target/router/RouteTwo.vue
new file mode 100644
index 000000000..ffa59b0ad
--- /dev/null
+++ b/shells/dev/target/router/RouteTwo.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <p>Hello from route 2</p>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
\ No newline at end of file
diff --git a/shells/dev/target/router/RouteWithAlias.vue b/shells/dev/target/router/RouteWithAlias.vue
new file mode 100644
index 000000000..0a67a2ec8
--- /dev/null
+++ b/shells/dev/target/router/RouteWithAlias.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <p>Hello from route with alias</p>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
\ No newline at end of file
diff --git a/shells/dev/target/router/RouteWithBeforeEnter.vue b/shells/dev/target/router/RouteWithBeforeEnter.vue
new file mode 100644
index 000000000..479291b0a
--- /dev/null
+++ b/shells/dev/target/router/RouteWithBeforeEnter.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <p>Hello from before enter route</p>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
\ No newline at end of file
diff --git a/shells/dev/target/router/RouteWithParams.vue b/shells/dev/target/router/RouteWithParams.vue
new file mode 100644
index 000000000..0b8db1849
--- /dev/null
+++ b/shells/dev/target/router/RouteWithParams.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <p>Hello from route with params: Username: {{ $route.params.username }}, Id: {{ $route.params.id }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
\ No newline at end of file
diff --git a/shells/dev/target/router/RouteWithProps.vue b/shells/dev/target/router/RouteWithProps.vue
new file mode 100644
index 000000000..34e7af10a
--- /dev/null
+++ b/shells/dev/target/router/RouteWithProps.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <p>Hello from route with props: Username: {{ username }}, Id: {{ id }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    username: {
+      type: String,
+      default: 'ms'
+    },
+    id: {
+      type: Number,
+      default: 33
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/shells/dev/target/router/RouteWithQuery.vue b/shells/dev/target/router/RouteWithQuery.vue
new file mode 100644
index 000000000..759da6f26
--- /dev/null
+++ b/shells/dev/target/router/RouteWithQuery.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <p>Hello from route with query: {{ $route.query }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
\ No newline at end of file
diff --git a/src/backend/index.js b/src/backend/index.js
index 61244c225..4a15dde4d 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -4,6 +4,7 @@
 import { highlight, unHighlight, getInstanceRect } from './highlighter'
 import { initVuexBackend } from './vuex'
 import { initEventsBackend } from './events'
+import { initRouterBackend } from './router'
 import { stringify, classify, camelize } from '../util'
 import path from 'path'
 
@@ -95,6 +96,9 @@ function connect () {
   bridge.send('ready', hook.Vue.version)
   console.log('[vue-devtools] Ready. Detected Vue v' + hook.Vue.version)
   scan()
+
+  // router
+  initRouterBackend(hook.Vue, bridge, rootInstances)
 }
 
 /**
diff --git a/src/backend/router.js b/src/backend/router.js
new file mode 100644
index 000000000..ff4c66130
--- /dev/null
+++ b/src/backend/router.js
@@ -0,0 +1,51 @@
+import { stringify } from '../util'
+
+export function initRouterBackend (Vue, bridge, rootInstances) {
+  let recording = true
+
+  const getSnapshot = () => {
+    const routeChanges = []
+    rootInstances.forEach(instance => {
+      const router = instance._router
+      if (router && router.options && router.options.routes) {
+        routeChanges.push(...router.options.routes)
+      }
+    })
+    return stringify({
+      routeChanges
+    })
+  }
+
+  bridge.send('routes:init', getSnapshot())
+
+  bridge.on('router:toggle-recording', enabled => {
+    recording = enabled
+  })
+
+  rootInstances.forEach(instance => {
+    const router = instance._router
+    if (router) {
+      router.afterEach((to, from) => {
+        if (!recording) return
+        bridge.send('router:changed', stringify({
+          to,
+          from,
+          timestamp: Date.now()
+        }))
+      })
+      bridge.send('router:init', stringify({
+        mode: router.mode
+      }))
+
+      if (router.matcher && router.matcher.addRoutes) {
+        const addRoutes = router.matcher.addRoutes
+        router.matcher.addRoutes = function (routes) {
+          routes.forEach((item) => {
+            bridge.send('routes:changed', stringify(item))
+          })
+          addRoutes.call(this, routes)
+        }
+      }
+    }
+  })
+}
diff --git a/src/devtools/App.vue b/src/devtools/App.vue
index 285bc401a..618ea7954 100644
--- a/src/devtools/App.vue
+++ b/src/devtools/App.vue
@@ -31,6 +31,20 @@
       <span class="pane-name">Events</span>
       <span class="event-count" v-if="newEventCount > 0">{{ newEventCount }}</span>
     </a>
+    <a class="button router"
+      :class="{ active: tab === 'router' }"
+      @click="switchTab('router')"
+      title="Switch to Router">
+      <i class="material-icons">directions</i>
+      <span class="pane-name">Router</span>
+    </a>
+    <a class="button router"
+      :class="{ active: tab === 'routes' }"
+      @click="switchTab('routes')"
+      title="Switch to Routes">
+      <i class="material-icons">book</i>
+      <span class="pane-name">Routes</span>
+    </a>
     <a class="button refresh"
       @click="refresh"
       title="Force Refresh">
@@ -47,6 +61,8 @@
 import ComponentsTab from './views/components/ComponentsTab.vue'
 import EventsTab from './views/events/EventsTab.vue'
 import VuexTab from './views/vuex/VuexTab.vue'
+import RouterTab from './views/router/RouterTab.vue'
+import RoutesTab from './views/routes/RoutesTab.vue'
 
 import { mapState } from 'vuex'
 
@@ -62,7 +78,9 @@ export default {
   components: {
     components: ComponentsTab,
     vuex: VuexTab,
-    events: EventsTab
+    events: EventsTab,
+    router: RouterTab,
+    routes: RoutesTab
   },
   computed: mapState({
     message: state => state.message,
diff --git a/src/devtools/common.styl b/src/devtools/common.styl
index d9b54f50c..9f2530569 100644
--- a/src/devtools/common.styl
+++ b/src/devtools/common.styl
@@ -22,3 +22,47 @@ $dark-active-color = $active-color
 $dark-border-color = lighten($slate, 10%)
 $dark-background-color = $slate
 $dark-component-color = $active-color
+
+// Entries 
+
+.no-entries
+  color: #ccc
+  text-align: center
+  margin-top: 50px
+  line-height: 30px
+
+.entry
+  position: relative;
+  font-family Menlo, Consolas, monospace
+  color #881391
+  cursor pointer
+  padding 10px 20px
+  font-size 12px
+  background-color $background-color
+  box-shadow 0 1px 5px rgba(0,0,0,.12)
+  .entry-name
+    font-weight 600
+  .entry-source
+    color #999
+  .component-name
+    color $component-color
+  .entry-type
+    color #999
+    margin-left 8px
+  &.active
+    color #fff
+    background-color $active-color
+    .time, .entry-type, .component-name
+      color lighten($active-color, 75%)
+    .entry-name
+      color: #fff
+    .entry-source
+      color #ddd
+  .app.dark &
+    background-color $dark-background-color
+
+.time
+  font-size 11px
+  color #999
+  float right
+  margin-top 3px
diff --git a/src/devtools/components/SplitPane.vue b/src/devtools/components/SplitPane.vue
index 5786fc1b5..d41cd3277 100644
--- a/src/devtools/components/SplitPane.vue
+++ b/src/devtools/components/SplitPane.vue
@@ -45,27 +45,5 @@ export default {
 
 <style lang="stylus" scoped>
 @import "../common"
-
-.split-pane
-  display flex
-  height 100%
-  &.dragging
-    cursor ew-resize
-
-.left, .right
-  position relative
-
-.left
-  border-right 1px solid $border-color
-  .app.dark &
-    border-right 1px solid $dark-border-color
-
-.dragger
-  position absolute
-  z-index 99
-  top 0
-  bottom 0
-  right -5px
-  width 10px
-  cursor ew-resize
+@import "./splitPanes"
 </style>
diff --git a/src/devtools/components/TriplePane.vue b/src/devtools/components/TriplePane.vue
new file mode 100644
index 000000000..12b52fb80
--- /dev/null
+++ b/src/devtools/components/TriplePane.vue
@@ -0,0 +1,78 @@
+<template>
+  <div style="height: 100%;" class="split-pane"
+    @mousemove="dragMove"
+    @mouseup="dragEnd"
+    @mouseleave="dragEnd"
+    :class="{ dragging: dragging }">
+    <div class="left" :style="{ width: widthLeft + '%' }">
+      <slot name="left"></slot>
+      <div class="dragger" @mousedown="dragStartLeft"></div>
+    </div>
+    <div class="middle" :style="{ width: widthMiddle + '%' }">
+      <slot name="middle"></slot>
+      <div class="dragger" @mousedown="dragStartRight"></div>
+    </div>
+    <div class="right" :style="{ width: widthRight + '%' }">
+      <slot name="right"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      widthLeft: 20,
+      widthMiddle: 40,
+      widthRight: 40,
+      draggingLeft: false,
+      draggingRight: false
+    }
+  },
+  computed: {
+    dragging () {
+      return this.draggingLeft && this.draggingRight
+    }
+  },
+  methods: {
+    dragStartLeft (e) {
+      this.draggingLeft = true
+      this.startXLeft = e.pageX
+      this.startSplitLeft = this.widthLeft
+      this.startSplitMiddle = this.widthMiddle
+    },
+    dragStartRight (e) {
+      this.draggingRight = true
+      this.startXRight = e.pageX
+      this.startSplitRight = this.widthRight
+      this.startSplitMiddle = this.widthMiddle
+    },
+    dragMove (e) {
+      if (this.draggingLeft) {
+        const diff = this.getDiff(e, this.startXLeft)
+        this.widthLeft = this.startSplitLeft + diff
+        this.widthMiddle = this.startSplitMiddle - diff
+      }
+      if (this.draggingRight) {
+        const diff = this.getDiff(e, this.startXRight)
+        this.widthMiddle = this.startSplitMiddle + diff
+        this.widthRight = this.startSplitRight - diff
+      }
+    },
+    getDiff (e, start) {
+      const dx = e.pageX - start
+      const totalWidth = this.$el.offsetWidth
+      return ~~(dx / totalWidth * 100)
+    },
+    dragEnd () {
+      this.draggingLeft = false
+      this.draggingRight = false
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "../common"
+@import "./splitPanes"
+</style>
diff --git a/src/devtools/components/splitPanes.styl b/src/devtools/components/splitPanes.styl
new file mode 100644
index 000000000..2a5ba77c5
--- /dev/null
+++ b/src/devtools/components/splitPanes.styl
@@ -0,0 +1,22 @@
+.split-pane
+  display flex
+  height 100%
+  &.dragging
+    cursor ew-resize
+
+.left, .right, .middle
+  position relative
+
+.left, .middle
+  border-right 1px solid $border-color
+  .app.dark &
+    border-right 1px solid $dark-border-color
+
+.dragger
+  position absolute
+  z-index 99
+  top 0
+  bottom 0
+  right -5px
+  width 10px
+  cursor ew-resize
\ No newline at end of file
diff --git a/src/devtools/index.js b/src/devtools/index.js
index 0576bd2a7..4996f643f 100644
--- a/src/devtools/index.js
+++ b/src/devtools/index.js
@@ -94,6 +94,27 @@ function initApp (shell) {
       }
     })
 
+    bridge.on('router:init', payload => {
+      store.commit('router/INIT', parse(payload))
+    })
+
+    bridge.on('router:changed', payload => {
+      store.commit('router/CHANGED', parse(payload))
+    })
+
+    bridge.on('routes:init', payload => {
+      store.commit('routes/INIT', parse(payload))
+    })
+
+    bridge.on('routes:changed', payload => {
+      store.commit('routes/CHANGED', parse(payload))
+    })
+
+    // register filters
+    Vue.filter('formatTime', function (timestamp) {
+      return (new Date(timestamp)).toString().match(/\d\d:\d\d:\d\d/)[0]
+    })
+
     app = new Vue({
       store,
       render (h) {
diff --git a/src/devtools/store/index.js b/src/devtools/store/index.js
index c14ebb1bd..f1c150da8 100644
--- a/src/devtools/store/index.js
+++ b/src/devtools/store/index.js
@@ -3,6 +3,8 @@ import Vuex from 'vuex'
 import components from 'views/components/module'
 import vuex from 'views/vuex/module'
 import events from 'views/events/module'
+import router from 'views/router/module'
+import routes from 'views/routes/module'
 
 Vue.use(Vuex)
 
@@ -25,7 +27,9 @@ const store = new Vuex.Store({
   modules: {
     components,
     vuex,
-    events
+    events,
+    router,
+    routes
   }
 })
 
@@ -35,14 +39,18 @@ if (module.hot) {
   module.hot.accept([
     'views/components/module',
     'views/vuex/module',
-    'views/events/module'
+    'views/events/module',
+    'views/router/module',
+    'views/routes/module'
   ], () => {
     try {
       store.hotUpdate({
         modules: {
           components: require('views/components/module').default,
           vuex: require('views/vuex/module').default,
-          events: require('views/events/module').default
+          events: require('views/events/module').default,
+          router: require('views/router/module').default,
+          routes: require('views/routes/module').default
         }
       })
     } catch (e) {
diff --git a/src/devtools/views/events/EventsHistory.vue b/src/devtools/views/events/EventsHistory.vue
index 2792ca486..fee6c077d 100644
--- a/src/devtools/views/events/EventsHistory.vue
+++ b/src/devtools/views/events/EventsHistory.vue
@@ -15,7 +15,7 @@
       </a>
     </action-header>
     <div slot="scroll" class="history">
-      <div v-if="filteredEvents.length === 0" class="no-events">
+      <div v-if="filteredEvents.length === 0" class="no-entries">
         No events found<span v-if="!enabled"><br>(Recording is paused)</span>
       </div>
       <div class="entry"
@@ -23,9 +23,9 @@
         v-for="event in filteredEvents"
         :class="{ active: inspectedIndex === events.indexOf(event) }"
         @click="inspect(events.indexOf(event))">
-        <span class="event-name">{{ event.eventName }}</span>
-        <span class="event-type">{{ event.type }}</span>
-        <span class="event-source">
+        <span class="entry-name">{{ event.eventName }}</span>
+        <span class="entry-type">{{ event.type }}</span>
+        <span class="entry-source">
           by
           <span>&lt;</span>
           <span class="component-name">{{ event.instanceName }}</span>
@@ -70,18 +70,12 @@ export default {
     inspect: 'INSPECT',
     reset: 'RESET',
     toggleRecording: 'TOGGLE'
-  }),
-  filters: {
-    formatTime (timestamp) {
-      return (new Date(timestamp)).toString().match(/\d\d:\d\d:\d\d/)[0]
-    }
-  }
+  })
 }
 </script>
 
 <style lang="stylus" scoped>
 @import "../../common"
-
 .no-events
   color #ccc
   text-align center
diff --git a/src/devtools/views/router/RouterHistory.vue b/src/devtools/views/router/RouterHistory.vue
new file mode 100644
index 000000000..3cbba2a7b
--- /dev/null
+++ b/src/devtools/views/router/RouterHistory.vue
@@ -0,0 +1,105 @@
+<template>
+  <scroll-pane scroll-event="routes:init">
+    <action-header slot="header">
+      <div class="search">
+        <i class="material-icons">search</i>
+        <input class="" placeholder="Filter routes" v-model.trim="filter">
+      </div>
+      <a class="button reset" :class="{ disabled: !routeChanges.length }" @click="reset" title="Clear Routes">
+        <i class="material-icons small">do_not_disturb</i>
+        <span>Clear</span>
+      </a>
+      <a class="button toggle-recording" @click="toggleRecording" :title="enabled ? 'Stop Recording' : 'Start Recording'">
+        <i class="material-icons small" :class="{ enabled }">lens</i>
+        <span>{{ enabled ? 'Recording' : 'Paused' }}</span>
+      </a>
+    </action-header>
+    <div slot="scroll" class="">
+      <div v-if="filteredRoutes.length === 0" class="no-entries">
+        No route transitions found<span v-if="!enabled"><br>(Recording is paused)</span>
+      </div>
+      <div class="entry"
+        v-else
+        v-for="route in filteredRoutes"
+        :class="{ active: inspectedIndex === filteredRoutes.indexOf(route) }"
+        @click="inspect(filteredRoutes.indexOf(route))">
+        <div class="urls">
+          <span>{{ route.to.path }}</span>
+        </div>
+        <div>
+          <span class="time">{{ route.timestamp | formatTime }}</span>
+          <span class="label redirect" v-if="route.to.redirectedFrom">redirect</span>
+          <span class="label name" v-if="isNotEmpty(route.to.name)">{{route.to.name}}</span>
+        </div>
+      </div>
+    </div>
+  </scroll-pane>
+</template>
+
+<script>
+import { UNDEFINED } from 'src/util'
+import ScrollPane from 'components/ScrollPane.vue'
+import ActionHeader from 'components/ActionHeader.vue'
+
+import { mapState, mapMutations, mapGetters } from 'vuex'
+
+export default {
+  components: {
+    ScrollPane,
+    ActionHeader
+  },
+  computed: {
+    filter: {
+      get () {
+        return this.$store.state.router.filter
+      },
+      set (filter) {
+        this.$store.commit('router/UPDATE_FILTER', filter)
+      }
+    },
+    ...mapState('router', [
+      'enabled',
+      'routeChanges',
+      'inspectedIndex'
+    ]),
+    ...mapGetters('router', [
+      'filteredRoutes'
+    ])
+  },
+  methods: {
+    ...mapMutations('router', {
+      inspect: 'INSPECT',
+      reset: 'RESET',
+      toggleRecording: 'TOGGLE'
+    }),
+    isNotEmpty (value) {
+      return !!value && value !== UNDEFINED
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "../../common"
+
+.entry
+  display: flex
+  align-items: center
+
+.urls
+  margin-right: auto
+
+.label
+  color #fff
+  float right
+  font-size 10px
+  padding 4px 8px
+  border-radius 6px
+  margin-right 8px
+  &.name
+    background-color #aaa
+  &.alias
+    background-color #ff8344
+  &.redirect
+    background-color #af90d5
+</style>
diff --git a/src/devtools/views/router/RouterMeta.vue b/src/devtools/views/router/RouterMeta.vue
new file mode 100644
index 000000000..97f670459
--- /dev/null
+++ b/src/devtools/views/router/RouterMeta.vue
@@ -0,0 +1,93 @@
+<template>
+  <scroll-pane>
+    <div v-if="activeRouteChange" slot="scroll">
+      <state-inspector :state="{ from, to }" />
+    </div>
+    <div v-else slot="scroll" class="no-route-data">
+      No route transition selected
+    </div>
+  </scroll-pane>
+</template>
+
+<script>
+import StateInspector from 'components/StateInspector.vue'
+import ActionHeader from 'components/ActionHeader.vue'
+import ScrollPane from 'components/ScrollPane.vue'
+import { mapGetters } from 'vuex'
+import { UNDEFINED } from 'src/util'
+
+export default {
+  components: {
+    ScrollPane,
+    ActionHeader,
+    StateInspector
+  },
+  computed: {
+    ...mapGetters('router', [
+      'activeRouteChange'
+    ]),
+    to () {
+      return this.sanitizeRouteData(this.activeRouteChange.to)
+    },
+    from () {
+      return this.sanitizeRouteData(this.activeRouteChange.from)
+    }
+  },
+  methods: {
+    sanitizeRouteData (routeData) {
+      const data = {
+        path: routeData.path,
+        fullPath: routeData.fullPath
+      }
+      if (routeData.redirectedFrom) {
+        data.redirectedFrom = routeData.redirectedFrom
+      }
+      if (!this.isEmptyObject(routeData.params)) {
+        data.params = routeData.params
+      }
+      if (!this.isEmptyObject(routeData.query)) {
+        data.query = routeData.query
+      }
+      if (routeData.name && routeData.name !== UNDEFINED) {
+        data.name = routeData.name
+      }
+      if (routeData.hash && routeData.hash !== '') {
+        data.hash = routeData.hash
+      }
+      if (routeData.meta && !this.isEmptyObject(routeData.meta)) {
+        data.meta = routeData.meta
+      }
+      if (routeData.matched && routeData.matched.length > 0) {
+        data.matched = this.sanitizeMatched(routeData.matched)
+      }
+      return data
+    },
+    isEmptyObject (obj) {
+      return Object.keys(obj).length === 0
+    },
+    sanitizeMatched (matched) {
+      const result = []
+      for (let i = 0; i < matched.length; i++) {
+        const obj = {
+          path: matched[i].path
+        }
+        if (matched[i].props && !this.isEmptyObject(matched[i].props)) {
+          obj.props = matched[i].props
+        }
+        result.push(obj)
+      }
+      return result
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "../../common"
+
+.no-route-data
+  color: #ccc;
+  text-align: center;
+  margin-top: 50px;
+  line-height: 30px;
+</style>
diff --git a/src/devtools/views/router/RouterTab.vue b/src/devtools/views/router/RouterTab.vue
new file mode 100644
index 000000000..6e5f71ac7
--- /dev/null
+++ b/src/devtools/views/router/RouterTab.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <split-pane v-if="hasRouter">
+      <router-history slot="left"></router-history>
+      <router-meta slot="right"></router-meta>
+    </split-pane>
+    <div v-else class="notice">
+      <div>
+        No router detected.
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SplitPane from 'components/SplitPane.vue'
+import RouterHistory from './RouterHistory.vue'
+import RouterMeta from './RouterMeta.vue'
+import { mapState } from 'vuex'
+
+export default {
+  computed: mapState('router', {
+    hasRouter: state => state.hasRouter
+  }),
+  components: {
+    SplitPane,
+    RouterHistory,
+    RouterMeta
+  }
+}
+</script>
diff --git a/src/devtools/views/router/module.js b/src/devtools/views/router/module.js
new file mode 100644
index 000000000..6343c8e26
--- /dev/null
+++ b/src/devtools/views/router/module.js
@@ -0,0 +1,61 @@
+import storage from '../../storage'
+
+const ENABLED_KEY = 'EVENTS_ENABLED'
+const enabled = storage.get(ENABLED_KEY)
+
+const state = {
+  enabled: enabled == null ? true : enabled,
+  hasRouter: false,
+  instances: [],
+  routeChanges: [],
+  inspectedIndex: -1,
+  filter: ''
+}
+
+const mutations = {
+  'INIT' (state, payload) {
+    state.instances = []
+    state.routeChanges = []
+    state.inspectedIndex = -1
+    state.hasRouter = true
+    state.instances.push(payload)
+  },
+  'RESET' (state) {
+    state.routeChanges = []
+    state.inspectedIndex = -1
+  },
+  'CHANGED' (state, payload) {
+    state.routeChanges.push(payload)
+    if (!state.filter) {
+      state.inspectedIndex = state.routeChanges.length - 1
+    }
+  },
+  'INSPECT' (state, index) {
+    state.inspectedIndex = index
+  },
+  'UPDATE_FILTER' (state, filter) {
+    state.filter = filter
+  },
+  'TOGGLE' (state) {
+    storage.set(ENABLED_KEY, state.enabled = !state.enabled)
+    bridge.send('router:toggle-recording', state.enabled)
+  }
+}
+
+const getters = {
+  activeRouteChange: state => {
+    return state.routeChanges[state.inspectedIndex]
+  },
+  filteredRoutes: state => {
+    return state.routeChanges.filter(routeChange => {
+      return routeChange.from.fullPath.indexOf(state.filter) > -1 || routeChange.to.fullPath.indexOf(state.filter) > -1
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  getters
+}
diff --git a/src/devtools/views/routes/RouterTab.vue b/src/devtools/views/routes/RouterTab.vue
new file mode 100644
index 000000000..d712d4fea
--- /dev/null
+++ b/src/devtools/views/routes/RouterTab.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <triple-pane v-if="hasRouter">
+      <routes-tree slot="left"></routes-tree>
+      <routes-history slot="middle"></routes-history>
+      <route-meta slot="right"></route-meta>
+    </triple-pane>
+    <div v-else class="notice">
+      <div>
+        No routes detected.
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SplitPane from 'components/SplitPane.vue'
+import TriplePane from 'components/TriplePane.vue'
+import RoutesHistory from './RoutesHistory.vue'
+import RoutesTree from './RoutesTree.vue'
+import RouteMeta from './RouteMeta.vue'
+import { mapState } from 'vuex'
+
+export default {
+  computed: mapState('routes', {
+    hasRouter: state => state.hasRouter
+  }),
+  components: {
+    SplitPane,
+    TriplePane,
+    RoutesHistory,
+    RouteMeta,
+    RoutesTree
+  }
+}
+</script>
diff --git a/src/devtools/views/routes/RoutesMeta.vue b/src/devtools/views/routes/RoutesMeta.vue
new file mode 100644
index 000000000..a58ce1ed5
--- /dev/null
+++ b/src/devtools/views/routes/RoutesMeta.vue
@@ -0,0 +1,89 @@
+<template>
+  <scroll-pane>
+    <div v-if="activeRouteChange" slot="scroll">
+      <state-inspector :state="{ options }" />
+    </div>
+    <div v-else slot="scroll" class="no-route-data">
+      No route selected
+    </div>
+  </scroll-pane>
+</template>
+
+<script>
+import StateInspector from 'components/StateInspector.vue'
+import ActionHeader from 'components/ActionHeader.vue'
+import ScrollPane from 'components/ScrollPane.vue'
+import { mapGetters } from 'vuex'
+import { UNDEFINED } from 'src/util'
+
+export default {
+  components: {
+    ScrollPane,
+    ActionHeader,
+    StateInspector
+  },
+  computed: {
+    ...mapGetters('routes', [
+      'activeRouteChange'
+    ]),
+    options () {
+      return this.sanitizeRouteData(this.activeRouteChange)
+    }
+  },
+  methods: {
+    sanitizeRouteData (routeData) {
+      console.log(routeData)
+      const data = {
+        path: routeData.path
+      }
+      if (routeData.redirect) {
+        data.redirect = routeData.redirect
+      }
+      if (routeData.alias) {
+        data.alias = routeData.alias
+      }
+      if (!this.isEmptyObject(routeData.props)) {
+        data.props = routeData.props
+      }
+      if (routeData.name && routeData.name !== UNDEFINED) {
+        data.name = routeData.name
+      }
+      if (routeData.component) {
+        const component = {}
+        // if (routeData.component.__file) {
+        //   component.file = routeData.component.__file
+        // }
+        if (routeData.component.template) {
+          component.template = routeData.component.template
+        }
+        if (routeData.component.props) {
+          component.props = routeData.component.props
+        }
+        if (!this.isEmptyObject(component)) {
+          data.component = component
+        }
+      }
+      if (routeData.children) {
+        data.children = []
+        routeData.children.forEach((item) => {
+          data.children.push(this.sanitizeRouteData(item))
+        })
+      }
+      return data
+    },
+    isEmptyObject (obj) {
+      return obj === UNDEFINED || !obj || Object.keys(obj).length === 0
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "../../common"
+
+.no-route-data
+  color: #ccc;
+  text-align: center;
+  margin-top: 50px;
+  line-height: 30px;
+</style>
diff --git a/src/devtools/views/routes/RoutesTab.vue b/src/devtools/views/routes/RoutesTab.vue
new file mode 100644
index 000000000..b4beb9fe5
--- /dev/null
+++ b/src/devtools/views/routes/RoutesTab.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <split-pane v-if="hasRouter">
+      <routes-tree slot="left"></routes-tree>
+      <routes-meta slot="right"></routes-meta>
+    </split-pane>
+    <div v-else class="notice">
+      <div>
+        No routes detected.
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SplitPane from 'components/SplitPane.vue'
+import RoutesTree from './RoutesTree.vue'
+import RoutesMeta from './RoutesMeta.vue'
+import { mapState } from 'vuex'
+
+export default {
+  computed: mapState('routes', {
+    hasRouter: state => state.hasRouter
+  }),
+  components: {
+    SplitPane,
+    RoutesMeta,
+    RoutesTree
+  }
+}
+</script>
diff --git a/src/devtools/views/routes/RoutesTree.vue b/src/devtools/views/routes/RoutesTree.vue
new file mode 100644
index 000000000..d465c6338
--- /dev/null
+++ b/src/devtools/views/routes/RoutesTree.vue
@@ -0,0 +1,57 @@
+<template>
+  <scroll-pane scroll-event="routes:init">
+    <action-header slot="header">
+      <div class="search">
+        <i class="material-icons">search</i>
+        <input placeholder="Filter routes" v-model.trim="filter">
+      </div>
+    </action-header>
+    <div slot="scroll" class="tree">
+      <routes-tree-item
+        v-for="(route, key) in filteredRoutes"
+        ref="instances"
+        :key="key"
+        :route="route"
+        :routeId="key"
+        :depth="0">
+      </routes-tree-item>
+    </div>
+  </scroll-pane>
+</template>
+
+<script>
+import ScrollPane from 'components/ScrollPane.vue'
+import ActionHeader from 'components/ActionHeader.vue'
+import RoutesTreeItem from './RoutesTreeItem.vue'
+
+import { mapGetters } from 'vuex'
+
+export default {
+  components: {
+    ScrollPane,
+    ActionHeader,
+    RoutesTreeItem
+  },
+  computed: {
+    filter: {
+      get () {
+        return this.$store.state.routes.filter
+      },
+      set (filter) {
+        this.$store.commit('routes/UPDATE_FILTER', filter)
+      }
+    },
+    ...mapGetters('routes', [
+      'filteredRoutes'
+    ])
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "../../common"
+.route-heading
+  padding: 0px 10px
+.tree
+  padding 5px
+</style>
diff --git a/src/devtools/views/routes/RoutesTreeItem.vue b/src/devtools/views/routes/RoutesTreeItem.vue
new file mode 100644
index 000000000..c888f5f47
--- /dev/null
+++ b/src/devtools/views/routes/RoutesTreeItem.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="instance"
+      :class="{ selected: selected }">
+    <div class="self"
+      @click.stop="inspect(routeId)"
+      :class="{ selected: selected }"
+      :style="{ paddingLeft: depth * 15 + 'px' }">
+      <span class="content">
+        <!-- arrow wrapper for better hit box -->
+        <span class="arrow-wrapper" v-if="route.children && route.children.length">
+          <span class="arrow right" :class="{ rotated: expanded }">
+          </span>
+        </span>
+        <span class="instance-name">
+          {{ route.path }}
+        </span>
+      </span>
+      <span class="info name" v-if="route.name">
+        {{ route.name }}
+      </span>
+      <span class="info alias" v-if="route.alias">
+        alias: <b>{{ route.alias }}</b>
+      </span>
+      <span class="info redirect" v-if="route.redirect">
+        redirect: <b>{{ route.redirect }}</b>
+      </span>
+    </div>
+    <div v-if="expanded">
+      <routes-tree-item
+        v-for="(child, key) in route.children"
+        :key="child"
+        :route="child"
+        :routeId="routeId + '_' + key"
+        :depth="depth + 1">
+      </routes-tree-item>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import { mapState, mapMutations, mapGetters } from 'vuex'
+
+export default {
+  name: 'RoutesTreeItem',
+  props: {
+    routeId: String|Number,
+    route: Object,
+    depth: Number
+  },
+  created () {
+    // expand root by default
+    if (this.depth === 0) {
+      // this.expand()
+    }
+  },
+  computed: {
+    ...mapState('routes', [
+      'inspectedIndex'
+    ]),
+    expanded () {
+      return !!this.route.children && this.route.children.length
+    },
+    selected () {
+      return this.inspectedIndex === this.routeId
+    }
+  },
+  methods: {
+    ...mapMutations('routes', {
+      inspect: 'INSPECT'
+    })
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "../../common"
+
+.instance
+  font-family Menlo, Consolas, monospace
+
+.self
+  cursor pointer
+  position relative
+  overflow hidden
+  z-index 2
+  background-color $background-color
+  transition background-color .1s ease
+  border-radius 3px
+  font-size 14px
+  line-height 22px
+  height 22px
+  white-space nowrap
+  &.selected
+    background-color $active-color
+    .arrow
+      border-left-color #fff
+    .instance-name
+      color #fff
+
+.arrow
+  position absolute
+  top 5px
+  left 4px
+  transition transform .1s ease, border-left-color .1s ease
+  &.rotated
+    transform rotate(90deg)
+
+.arrow-wrapper
+  position absolute
+  display inline-block
+  width 16px
+  height 16px
+  top 0
+  left 4px
+
+.children
+  position relative
+  z-index 1
+
+.content
+  position relative
+  padding-left 22px
+
+.instance-name
+  color $component-color
+  margin 0 1px
+  transition color .1s ease
+
+.info
+  color #fff
+  font-size 10px
+  padding 3px 5px 2px
+  display inline-block
+  line-height 10px
+  border-radius 3px
+  position relative
+  top -1px
+  margin-left 6px
+  &.name
+    background-color #b3cbf7
+  &.alias
+    background-color #ff8344
+  &.redirect
+    background-color #aaa
+</style>
diff --git a/src/devtools/views/routes/module.js b/src/devtools/views/routes/module.js
new file mode 100644
index 000000000..2ad88c18d
--- /dev/null
+++ b/src/devtools/views/routes/module.js
@@ -0,0 +1,55 @@
+import storage from '../../storage'
+
+const ENABLED_KEY = 'EVENTS_ENABLED'
+const enabled = storage.get(ENABLED_KEY)
+
+const state = {
+  enabled: enabled == null ? true : enabled,
+  hasRouter: false,
+  routeChanges: [],
+  inspectedIndex: -1,
+  filter: ''
+}
+
+const mutations = {
+  INIT (state, payload) {
+    state.inspectedIndex = -1
+    state.hasRouter = true
+    state.routeChanges = payload.routeChanges
+  },
+  CHANGED (state, payload) {
+    state.routeChanges.push(payload)
+  },
+  INSPECT (state, index) {
+    state.inspectedIndex = index
+  },
+  UPDATE_FILTER (state, filter) {
+    state.filter = filter
+  }
+}
+
+const getters = {
+  activeRouteChange: state => {
+    if (typeof state.inspectedIndex === 'string') {
+      const path = state.inspectedIndex.split('_')
+      let obj = state.routeChanges[parseInt(path[0])]
+      for (var i = 1, len = path.length; i < len; ++i) {
+        obj = obj.children[parseInt(path[i])]
+      }
+      return obj
+    }
+    return state.routeChanges[state.inspectedIndex]
+  },
+  filteredRoutes: state => {
+    return state.routeChanges.filter(routeChange => {
+      return routeChange.path.indexOf(state.filter) > -1
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  getters
+}