Fix issue with not beeing allowed to select nested routes

Author: armano2

src/backend/router.js

@@ -3,37 +3,40 @@ 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
   })
 
-  for (let i = 0; i < rootInstances.length; i++) {
-    const router = rootInstances[i]._router
+  rootInstances.forEach(instance => {
+    const router = instance._router
     if (router) {
       router.afterEach((to, from) => {
-        if (recording) {
-          bridge.send('router:changed', stringify({
-            to,
-            from,
-            timestamp: Date.now()
-          }))
-        }
+        if (!recording) return
+        bridge.send('router:changed', stringify({
+          to,
+          from,
+          timestamp: Date.now()
+        }))
       })
       bridge.send('router:init', stringify({
         mode: router.mode
       }))
 
-      bridge.send('routes:init', stringify({
-        routes: router.options.routes,
-        mode: router.mode
-      }))
-
-      if (router.options && router.options.routes) {
-        router.options.routes.forEach(instance => {
-          bridge.send('routes:changed', stringify(instance))
-        })
-      }
-
       if (router.matcher && router.matcher.addRoutes) {
         const addRoutes = router.matcher.addRoutes
         router.matcher.addRoutes = function (routes) {
@@ -44,5 +47,5 @@ export function initRouterBackend (Vue, bridge, rootInstances) {
         }
       }
     }
-  }
+  })
 }

src/devtools/views/router/RouterMeta.vue

@@ -1,9 +1,7 @@
 <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 v-if="activeRouteChange" slot="scroll">
+      <state-inspector :state="{ from, to }" />
     </div>
     <div v-else slot="scroll" class="no-route-data">
       No route transition selected
@@ -12,23 +10,27 @@
 </template>
 
 <script>
-import DataField from 'components/DataField.vue'
+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: {
-    DataField,
-    ScrollPane
+    ScrollPane,
+    ActionHeader,
+    StateInspector
   },
   computed: {
     ...mapGetters('router', [
       'activeRouteChange'
     ]),
     to () {
-      // return this.activeRouteChange.to
       return this.sanitizeRouteData(this.activeRouteChange.to)
+    },
+    from () {
+      return this.sanitizeRouteData(this.activeRouteChange.from)
     }
   },
   methods: {

src/devtools/views/routes/RoutesMeta.vue

@@ -1,9 +1,7 @@
 <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 v-if="activeRouteChange" slot="scroll">
+      <state-inspector :state="{ options }" />
     </div>
     <div v-else slot="scroll" class="no-route-data">
       No route selected
@@ -12,21 +10,23 @@
 </template>
 
 <script>
-import DataField from 'components/DataField.vue'
+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: {
-    DataField,
-    ScrollPane
+    ScrollPane,
+    ActionHeader,
+    StateInspector
   },
   computed: {
     ...mapGetters('routes', [
       'activeRouteChange'
     ]),
-    to () {
+    options () {
       return this.sanitizeRouteData(this.activeRouteChange)
     }
   },
@@ -50,16 +50,16 @@ export default {
       }
       if (routeData.component) {
         const component = {}
-        if (routeData.component.__file) {
-          component.file = routeData.component.__file
-        }
+        // 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 (component !== {}) {
+        if (!this.isEmptyObject(component)) {
           data.component = component
         }
       }

src/devtools/views/routes/module.js

@@ -6,32 +6,38 @@ 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 = []
+  INIT (state, payload) {
     state.inspectedIndex = -1
     state.hasRouter = true
-    state.instances.push(payload)
+    state.routeChanges = payload.routeChanges
   },
-  'CHANGED' (state, payload) {
+  CHANGED (state, payload) {
     state.routeChanges.push(payload)
   },
-  'INSPECT' (state, index) {
+  INSPECT (state, index) {
     state.inspectedIndex = index
   },
-  'UPDATE_FILTER' (state, filter) {
+  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 => {