Add support for Vue router (adds routing tab)

[markussorg]

This will add Vue router support with the following features:

• See all registered routes
• See route changes over time (with search)
• See relevant route data (path, full-path, redirect, params, query, hash, meta and matched routes)

[bartlomieju]

Wow, this is impressive. There is a little bug preventing from running it. shells/dev/target/router/IndexRoute.vue is missing closing </div> on line 15 and because of that new template compiler is raising errors.

[markussorg]

@bartlomieju Thanks for the catch. Fixed now.

[posva]

Wow, so cool!

How does it look with a smaller width (~500px)?

[markussorg]

@posva This is how it looks like with ~500px. You can of course change the size of all panes with drag and drop.

[yyx990803]

First of all, this is awesome and thanks a lot for the contribution!

That said, there are a few things that I think can be improved regarding the UX. It would probably be better if we discussed the design for the router panel before the implementation.

• the "All Routes" list on the left is not clickable, which feels a bit weird. Ideally, when clicking on a route we should be able to inspect its configuration object.

• IMO a nested tree would be better than a flat list when visualizing the route structure.

• The route navigation history doesn't seem to be particularly useful -

What I would've went with:

• On the left a tree graph of the route structure.

• On the right, the state of the current active route.

• Nodes in the tree are highlighted to show the current active route path.

• Clicking on a route node displays its configuration (maybe in a popup tooltip). If the route node is currently active, it should also have a button to inspect its current rendered component.

I know this is quite different from what you have implemented, so don't feel any obligations to implement these. I just want to make sure we ship something that is useful enough to warrant an extra tab.

[markussorg]

Hey @yyx990803 ,

I can totally understand that you want to go in a different direction regarding the UI/UX. Unfortunately I have no time to work on it right now. So feel free to do whatever you want with this pull request.

[armano2]

Hello, @yyx990803

I checked code, and there is a lot to do with it still. i started working on it cus @markussorg have to time.

I'm following requirements

• On the left a tree graph of the route structure.
• On the right, the state of the current active route.
• Nodes in the tree are highlighted to show the current active route path.
• Clicking on a route node displays its configuration (maybe in a popup tooltip). If the route node is currently active, it should also have a button to inspect its current rendered component.

History of routing is not really helpful but in some scenarios can be useful that's why we should keep it on separated tab. If you guys decide to trash it we can do this more easily.

---

For now i'm slowly updating it to work with nested routes & addRoutes

https://github.com/markussorg/vue-devtools/pull/1

[yyx990803]

@armano2 Thanks for picking up the work!

[michalsnik]

Can we perhaps close this PR already in favor of #322 @yyx990803 ?