vuejs#1027 fix visual bug on routes list

Author: Sarmiento, Rodolfo

shells/dev/target/router.js

@@ -14,7 +14,7 @@ import ChildRoute from './router/ChildRoute.vue'
 Vue.use(VueRouter)
 
 const DynamicComponent = {
-  render: (h) => h('div', 'Hello from dynamic component')
+  render: h => h('div', 'Hello from dynamic component')
 }
 
 const routes = [
@@ -23,26 +23,42 @@ const routes = [
   { 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',
+  {
+    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',
+  {
+    name: 'editShow-legacy',
+    path: '/route-with-redirect-function',
+    redirect: to => ({ name: to.name.replace('-legacy', '') })
+  },
+  {
+    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',
+  {
+    path: '/route-parent',
     component: ParentRoute,
-    children: [
-      { path: '/route-child', component: ChildRoute }
-    ]
+    children: [{ path: '/route-child', component: ChildRoute }]
   }
 ]
 

src/devtools/views/routes/RoutesTreeItem.vue

@@ -42,7 +42,7 @@
         v-if="route.redirect"
         class="info redirect"
       >
-        redirect: <b>{{ route.redirect }}</b>
+        redirect: <b v-html="redirect" />
       </span>
       <span
         v-if="isActive"
@@ -88,17 +88,18 @@ export default {
     }
   },
   computed: {
-    ...mapState('routes', [
-      'inspectedIndex'
-    ]),
-    ...mapGetters('routes', [
-      'activeRoute'
-    ]),
+    ...mapState('routes', ['inspectedIndex']),
+    ...mapGetters('routes', ['activeRoute']),
     selected () {
       return this.inspectedIndex === this.routeId
     },
     isActive () {
       return this.activeRoute && this.activeRoute.path === this.route.path
+    },
+    redirect () {
+      return this.route.redirect._custom
+        ? this.route.redirect._custom.display
+        : this.route.redirect
     }
   },
   methods: {