通过路由器传递道具不起作用

Question

I'm using VueJS 2.3.3 and coffescript and I'm trying to pass a prop to a component from the router, but I'm having no success. Code is not mine, so I'm having some trouble figuring out what am I doing wrong. Here's my router:

App = require './views/App'

Shared = {
  header: require('./views/shared/header'),
  global_loader: require('./views/shared/global_loader.vue')
}

view = (view_name) ->
  require("./views/#{view_name}")

componentize = (view_name, options = {}) ->
  options.include_header ?= true

  component = options.component || {}

  component.app ?= view(view_name)
  component.header = Shared.header if options.include_header

  component

exports.routes = [
  {
    path: '/',
    component: App
    children: [
      {
        path: '/component',
        components: componentize('path/to/component'),
        props: { has_groups: true }
      },
      ...
    ]
  }
  ...
}

Here's my App.vue code:

  <template lang="pug">
    #app-wrapper
      transition(name="fade")
        router-view(name="global_loader")

      #header-wrapper
        router-view(name="header")

      #current-view-wrapper.container
        transition(name="enter")
          router-view(name="app")
    </template>

On my component, I'm receiving the prop as usual:

props:
   has_groups:
      default: false

Everything works fine, except that has_groups doesn't receive the correct prop value from the router. It doesn't change to true.

Can anyone help me finding out what I'm missing?

Answer 1

I found the solution. As I'm using named routes, I have to configure the props like:

props:
  global_loader: false
  header: false
  app: (route) -> ({ has_groups: true })