diff --git a/package.json b/package.json
index 2bc0e7f38..a506cb6e3 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/dev/target/index.js b/shells/dev/target/index.js
index 7d6197cec..72f93026c 100644
--- a/shells/dev/target/index.js
+++ b/shells/dev/target/index.js
@@ -6,6 +6,47 @@ import Counter from './Counter.vue'
 import Events from './Events.vue'
 import MyClass from './MyClass.js'
 
+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 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 },
+  { path: '/route-with-props', component: RouteWithProps, props: {
+    username: 'My Username',
+    id: 99
+  }},
+  { path: '/route-with-props-default', component: RouteWithProps }
+]
+
+const router = new VueRouter({
+  routes
+})
+
 let items = []
 for (var i = 0; i < 100; i++) {
   items.push({ id: i })
@@ -16,12 +57,14 @@ circular.self = circular
 
 new Vue({
   store,
+  router,
   render (h) {
     return h('div', null, [
       h(Counter),
       h(Target, {props:{msg: 'hi', ins: new MyClass()}}),
       h(Other),
-      h(Events)
+      h(Events),
+      h(IndexRoute)
     ])
   },
   data: {
diff --git a/shells/dev/target/router/IndexRoute.vue b/shells/dev/target/router/IndexRoute.vue
new file mode 100644
index 000000000..dc7d809c0
--- /dev/null
+++ b/shells/dev/target/router/IndexRoute.vue
@@ -0,0 +1,21 @@
+<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="/named-route">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>
+    <router-view></router-view>
+   </div>
+</template>
+
+<script>
+export default {
+}
+</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/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 023342665..4bfb18bad 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..a8fe59cb3
--- /dev/null
+++ b/src/backend/router.js
@@ -0,0 +1,19 @@
+import { stringify } from '../util'
+
+export function initRouterBackend (Vue, bridge, rootInstances) {
+  for (let i = 0; i < rootInstances.length; i++) {
+    if (rootInstances[i]._router) {
+      rootInstances[i]._router.afterEach((to, from) => {
+        bridge.send('router:changed', stringify({
+          to,
+          from,
+          timestamp: Date.now()
+        }))
+      })
+      bridge.send('router:init', stringify({
+        routes: rootInstances[i]._router.options.routes,
+        mode: rootInstances[i]._router.mode
+      }))
+    }
+  }
+}
diff --git a/src/devtools/App.vue b/src/devtools/App.vue
index 285bc401a..cb36da1bd 100644
--- a/src/devtools/App.vue
+++ b/src/devtools/App.vue
@@ -31,6 +31,13 @@
       <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 refresh"
       @click="refresh"
       title="Force Refresh">
@@ -47,6 +54,7 @@
 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 { mapState } from 'vuex'
 
@@ -62,7 +70,8 @@ export default {
   components: {
     components: ComponentsTab,
     vuex: VuexTab,
-    events: EventsTab
+    events: EventsTab,
+    router: RouterTab
   },
   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 ada80b318..6cf99bea2 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 84d53607e..5f8d9b806 100644
--- a/src/devtools/index.js
+++ b/src/devtools/index.js
@@ -83,6 +83,19 @@ 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))
+    })
+
+    // 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..2d6c66eaa 100644
--- a/src/devtools/store/index.js
+++ b/src/devtools/store/index.js
@@ -3,6 +3,7 @@ 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'
 
 Vue.use(Vuex)
 
@@ -25,7 +26,8 @@ const store = new Vuex.Store({
   modules: {
     components,
     vuex,
-    events
+    events,
+    router
   }
 })
 
@@ -35,14 +37,16 @@ if (module.hot) {
   module.hot.accept([
     'views/components/module',
     'views/vuex/module',
-    'views/events/module'
+    'views/events/module',
+    'views/router/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
         }
       })
     } catch (e) {
diff --git a/src/devtools/views/events/EventsHistory.vue b/src/devtools/views/events/EventsHistory.vue
index 039968e40..2ce790d14 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,57 +70,10 @@ 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
-  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)
-  .event-name
-    font-weight 600
-  .event-source
-    color #999
-  .component-name
-    color $component-color
-  .event-type
-    color #999
-    margin-left 8px
-  &.active
-    color #fff
-    background-color $active-color
-    .time, .event-type, .component-name
-      color lighten($active-color, 75%)
-    .event-name
-      color: #fff
-    .event-source
-      color #ddd
-  .app.dark &
-    background-color $dark-background-color
-
-.time
-  font-size 11px
-  color #999
-  float right
-  margin-top 3px
 </style>
diff --git a/src/devtools/views/router/RouteMeta.vue b/src/devtools/views/router/RouteMeta.vue
new file mode 100644
index 000000000..199d69ec4
--- /dev/null
+++ b/src/devtools/views/router/RouteMeta.vue
@@ -0,0 +1,90 @@
+<template>
+  <scroll-pane>
+    <div v-if="activeRouteChange" slot="scroll" class="data-wrapper">
+        <div class="data-fields">
+            <data-field v-for="(value, key) of to" :key="key" :field="{ key, value }" :depth="0"></data-field>
+        </div>
+    </div>
+    <div v-else slot="scroll" class="no-route-data">
+      No route transition selected
+    </div>
+  </scroll-pane>
+</template>
+
+<script>
+import DataField from 'components/DataField.vue'
+import ScrollPane from 'components/ScrollPane.vue'
+import { mapGetters } from 'vuex'
+
+export default {
+  components: {
+    DataField,
+    ScrollPane
+  },
+  computed: {
+    ...mapGetters('router', [
+      'activeRouteChange'
+    ]),
+    to () {
+      // return this.activeRouteChange.to
+      return this.sanitizeRouteData(this.activeRouteChange.to)
+    }
+  },
+  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 !== '__vue_devtool_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..7ee13e979
--- /dev/null
+++ b/src/devtools/views/router/RouterTab.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <triple-pane v-if="hasRouter">
+      <routes-list slot="left"></routes-list>
+      <routes-history slot="middle"></routes-history>
+      <route-meta slot="right"></route-meta>
+    </triple-pane>
+    <div v-else class="notice">
+      <div>
+        No router detected.
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SplitPane from 'components/SplitPane.vue'
+import TriplePane from 'components/TriplePane.vue'
+import RoutesHistory from './RoutesHistory.vue'
+import RoutesList from './RoutesList.vue'
+import RouteMeta from './RouteMeta.vue'
+import { mapState } from 'vuex'
+
+export default {
+  computed: mapState('router', {
+    hasRouter: state => state.hasRouter
+  }),
+  components: {
+    SplitPane,
+    TriplePane,
+    RoutesHistory,
+    RouteMeta,
+    RoutesList
+  }
+}
+</script>
diff --git a/src/devtools/views/router/RoutesHistory.vue b/src/devtools/views/router/RoutesHistory.vue
new file mode 100644
index 000000000..b6c238892
--- /dev/null
+++ b/src/devtools/views/router/RoutesHistory.vue
@@ -0,0 +1,89 @@
+<template>
+  <scroll-pane scroll-event="route: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>
+    </action-header>
+    <div slot="scroll" class="">
+      <div v-if="filteredRoutes.length === 0" class="no-entries">
+        No route transitions found
+      </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><b>From:</b> {{ route.from.path }}</span></br></br>
+          <span><b>To:</b> {{ route.to.path }}</span>
+        </div>
+        <div>
+          <span class="redirect" v-if="route.to.redirectedFrom">redirect</span>
+          <span class="time">{{ route.timestamp | formatTime }}</span>
+        </div>
+      </div>
+    </div>
+  </scroll-pane>
+</template>
+
+<script>
+import ScrollPane from 'components/ScrollPane.vue'
+import ActionHeader from 'components/ActionHeader.vue'
+import { mapState, mapMutations, mapGetters } from 'vuex'
+
+export default {
+  components: {
+    ScrollPane,
+    ActionHeader
+  },
+  computed: {
+    ...mapState('router', [
+      'routeChanges',
+      'inspectedIndex'
+    ]),
+    ...mapGetters('router', [
+      'filteredRoutes'
+    ]),
+    filter: {
+      get () {
+        return this.$store.state.router.filter
+      },
+      set (filter) {
+        this.$store.commit('router/UPDATE_FILTER', filter)
+      }
+    }
+  },
+  methods: mapMutations('router', {
+    inspect: 'INSPECT',
+    reset: 'RESET'
+  })
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "../../common"
+
+.entry
+  display: flex
+  align-items: center
+
+.urls
+  margin-right: auto
+
+.redirect
+  color: #fff
+  background-color: #af90d5
+  padding: 3px 6px
+  font-size: 10px
+  line-height: 10px
+  height: 16px
+  border-radius: 3px
+  margin-right: 17px
+  position: relative
+</style>
diff --git a/src/devtools/views/router/RoutesList.vue b/src/devtools/views/router/RoutesList.vue
new file mode 100644
index 000000000..644aa1f07
--- /dev/null
+++ b/src/devtools/views/router/RoutesList.vue
@@ -0,0 +1,34 @@
+<template>
+  <scroll-pane scroll-event="route:init">
+    <action-header slot="header">
+      <h3 class="route-heading">All routes</h3>
+    </action-header>
+    <div slot="scroll">
+      <div class="entry" v-for="route in routes">{{ route.path }}</div>
+    </div>
+  </scroll-pane>
+</template>
+
+<script>
+import ScrollPane from 'components/ScrollPane.vue'
+import ActionHeader from 'components/ActionHeader.vue'
+import { mapGetters } from 'vuex'
+
+export default {
+  components: {
+    ScrollPane,
+    ActionHeader
+  },
+  computed: {
+    ...mapGetters('router', [
+      'routes'
+    ])
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "../../common"
+.route-heading
+  padding: 0px 10px
+</style>
diff --git a/src/devtools/views/router/module.js b/src/devtools/views/router/module.js
new file mode 100644
index 000000000..5cd937eca
--- /dev/null
+++ b/src/devtools/views/router/module.js
@@ -0,0 +1,60 @@
+const state = {
+  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
+  }
+}
+
+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
+    })
+  },
+  routes: state => {
+    const routes = []
+    state.instances.forEach(instance => {
+      instance.routes.forEach(route => {
+        routes.push(route)
+      })
+    })
+    return routes
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  getters
+}