vue.jsvuejs2vue-routerroutervue-props

Can we pass data via props when pushing to a route in Vue?

I am asking this question to understand whether we can pass some data via props when navigating the new route. Because I read a few articles which recommend passing data as props and I want to understand if this really works.

As much as I looked into the documentation, passing props in routes works with only two cases-

  1. When you want to use passed params as props.
{ path: '/user/:id', component: User, props: true },
  1. When you want to pass some static data.
{ path: '/user/:id', component: User, props: { value: 123 } },

In both cases, we use the props property in the route's definition.

My question is if we want to pass some data via props when we push to a new route, is it doable? Because I tried this and noticed that passed props are always undefined. There is the same issue on GitHub that stated the problem but I didn't understand their last comment.

Here is the demo which shows that passed props are always undefined in the template.

const Comp1 = Vue.component('Comp1', {
  template: `
  <div>Comp1- <button @click="$router.push({name: 'Comp2',props: { value: 1234 },
      })">Push to route with props</button>
  </div>`,
});

const Comp2 = Vue.component('Comp1', {
  template: `<div>Comp2 - {{ value }} <button @click="$router.push({name: 'Comp1'
      })">Go back</button> </div>`,
  mounted() { console.log('Prop value- ', this.value) },
  props: ['value']
});

const router = new VueRouter({
  routes: [{
      path: '/',
      name: "Comp1",
      component: Comp1,
    },
    {
      path: '/comp1',
      name: "Comp2",
      component: Comp2,
    }
  ]
});

const app = new Vue({
  el: "#app",
  router,
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script>
<div id="app">
  <router-view></router-view>
</div>

Solution

  • What is said is that you can't dynamically pass data to a route unless it's in the parameters of the route record or statically provided

    What is a route parameter ?

    A route parameter is a part of the url that should match something, but that is still tied to a given a component. For example, in this route record, :id is a route parameter. It's something that will be dynamic.

    const routes: Route[] = [
  {
    name: 'user-detail',
    path '/users/:id',
    component: UserDetailView,
  },
];

    Now, the props property in the route record is something used to read differently the parameter in the URL. You can achieve this in 2 ways:

    export default defineComponent({
  props: {
    id: string; // Route params are strings, I'm not sure if you can parse them first
  },

  // Composition API
  setup(props) {
    // Method 1
    const route = useRoute();
    const userId = route.params.id;

    // Method 2
    const userIdFromProps = props.id
  },

  // Options API
  created() {
    // Method 1
    const userId = this.$route.params.id;

    // Method 2
    const userIdFromProps = this.id; (this.id reads the prop id)
  },
});

    What's the point of using props then ?

    I may be wrong, but the only use case I see is when you want to use a component as a route's view.

    You have a component that accepts props that you use in another view. And this component matches exactly your requirements, so instead of wrapping it in a view, you directly use it as a route's view, and props are automatically passed down.

    My thoughts

    Given my experience in many apps built with vue, this is something that rarely happens. Params in the route url usually match a ressource's ID, and you usually fetch it before passing it down to a component. So I'd use a wrapper anyway and would never use props on route records.

    The answer:

    After all those explanations I forgot to answer, because the question shouldn't have to be asked:

    You can't pass props when pushing to a new route. The props will be read either from the URL if you use props: true in your route record, or from the route definition (record) if you statically defined it.

    If you want to push data: