path-to-regexp Find regular expression matching the route

Question

I am adding dynamic child components while the page loads. Adding child routes in OnCreated of parent does not make the page work when we refresh the page.

Hence, I am parsing the page templates (as I know them when the page loads).

I am now looking for a way to know the route which matches the href. Vue-js uses path-to-regexp and my question is very simple.

I want to know the matching component

const router = new VueRouter({
  routes: [
    // dynamic segments start with a colon
    { path: '/user/:id', component: User },
    { path: '/foo/bar', component: FooBar },

  ]
})    

// Reverse of this
var matchingComponent = howDoIDothis(/foo/bar) // this should give me the matching 

I need this so that I can remove from the path and then add the child component to the parent dynamically.

Answer 1

You need to use Vue router's router.getMatchedComponents method. However, this method needs that your router is fully initialized with all the routes. Otherwise, there is no way. Vue-router doesn't expose underlying parsed Regular expressions against which you can compare your href.

Also, what you are trying to do is not the most idiomatic way of doing things in Single Page Applications. A good practice is to declare all your routes upfront in some JS file using which you should initialize your router. Of course, you will want to protect certain routes for which you should use Route guards.

Finally, when you have all your routes declared upfront means you have all the components bundled upfront in one big JS file. To avoid this, wrap your component in async wrappers and bundler like Webpack would be smart enough to split the bundle into multiple smaller files.