Use Vue router to set variables instead of component visibility?

Question

I want to use url parameters to set variables in my Vue application. I thought vue-router would be useful for that, but it seems to be all made for showing/hiding components inside a router-view component.

I'm considering using a single component without a template inside the router-view to set variables like this:

export default new Router({
  routes: [
    {
      path: '/preferences',
      name: 'Preferences',
      component: Navigator,
      props: { preferencesVisible: true }
    },
    {
      path: '/info',
      name: 'Info',
      component: Navigator,
      props: { infoVisible: true, preferencesVisible: false }
    }
  ]
})

That way I could add additional logic that will define what components are visible as well as other things (e.g. app parameters that can be shared via links).

Are there reasons not to use vue-router this way? Are there better solutions to achieve this?

kslstn kslstn · Accepted Answer · 2018-12-01T11:12:56

My question was based on bad understanding of what VueRouter does. There is no need to add an extra navigator component like I suggested.

To achieve the goal in the question, add a router view and use the router to control its content and props. After all, we need something in the template for the router to control. If needed, the content can be a single component that is never hidden. To achieve that all paths in the router refer to that router view (or at least: all router paths for that router view).

Use Vue router to set variables instead of component visibility?

1 Answers