Search code examples
vue.jsvue-componentvuexvue-router

How to pass dynamic props through <router-view>

I have an app in vue and registered the router, All i need is to pass dynamic props to some components through .

app.vue

<template>
  <v-app>
    <router-view :user="userVariable"></router-view>
  </v-app>
</template>

router.js

Vue.use(Router);
export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login,
      props: true,
    },
    {
      path: '/profile',
      name: 'profile',
      component: Profile,
      props: true,
    },
  ],
});

I got the props while initiating the component, but cant able get the updated props while updating the value which is userVariable. :(

Solution

  • I have created this CodeSanbox example in which everything seems to be working fine.

    I have tried both cases, when the variable you're passing is either a primitive or a non-primitive value.