Vue-router: Props in children routes not working

[goowikns]

Version

3.0.1

Reproduction link

https://codesandbox.io/s/z611lrnq24

Steps to reproduce

So I have following routes setup:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      props: { adops: null }
    },
    {
      path: '/features',
      name: 'Features',
      component: Home,
      props: { adops: 'features' },
      children: [
        {
          path: 'hpto',
          name: 'Hpto',
          component: Home,
          props: { adops: 'target_hpto' }
        },
        {
          path: 'inread',
          name: 'Inread',
          component: Home,
          props: { adops: 'target_inread' }
        }
    }
}

When I go to the route "/feature" I get the correct string in my adops objects adops = "features".

The moment I visit the children routes for example: /features/hpto, my prop object doesn't change (it keeps it's parent value, in this case adops = "features")

What is expected?

adops = target_hpto

What is actually happening?

adops = features

[posva]

Your example is incomplete so it doesn't let you debug correctly, but props get passed to the child you specified them on: https://codesandbox.io/s/2p3nx1y64r

You can use the function syntax for props to change the prop depending on the route

[goowikns]

I'm not sure what you mean by incomplete. The codesandbox I provided shows the same issue as I'm explaining.

Pay attention to the fact that each route uses the same component (Home; compared to your example).

[posva]

By incomplete, I mean that you're not using router-view inside of Home

[goowikns]

Off course not, it's set in the App.vue.

Or am I viewing this wrong? I just need to use the same component for all of em (which in this case is the Home component).

[posva]

Ah, I see. Using children allow you to nest views: https://router.vuejs.org/en/essentials/nested-routes.html

[goowikns]

Aaah I see ! I should have read better. Sorry for this inconvenience :)

I thought I could use the same component in this case. That's a bummer, quite a restriction.

Anyways, thanks for helping out!

[posva]

You can! Simply don't use nested routes

[xqin]

@goowikns

try this.

• remove children props
• change Features props to be a function and return route.name as adops

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      props: { adops: null }
    },
    {
      path: '/features',
      name: 'Features',
      component: Home,
      props: (route) => ({ adops: route.name }),
      children: [
        {
          path: 'hpto',
          name: 'Hpto',
          component: Home
        },
        {
          path: 'inread',
          name: 'Inread',
          component: Home
        }
    }
}