CODEWITHSUNDEEP
javascripttypescriptvue.js
Zyzyx
Zyzyx

Reputation: 524

Vue passing data from one page to the next

On my one page I have a table, where the following runs after clicking a row:

  public onRowDataClick(workItem){    
  this.$router.push({
    path: '/SecondPageView',
    params: {pushedData: workItem}
   });
  }

This is my route:

    {
        path: '/SecondPageView',
        name: 'SecondPage',
        component: SecondPage,
        meta: {
            requiresAuth: true,
        },
    },

The next page loads fine, and now I want to be able to use the pushedData, but I'm not entirely sure how this should go.

I tried following the previous stackoverflow answer here, but I can't set it up in the same way due to how my class is set up? It wont let me have props: after my export default ....

Based on reading material here and the previous answer, I have set up the following:

<template>
...
</template>

<script lang="ts">

import ...

const GreetingProps = Vue.extend({
  props: ['pushedData']
});

@Component({
  components: {
...
  },
})  

export default class Dashboard extends GreetingProps {    
  @Watch('buttonClicked')
  Log() {
    console.log(this.pushedData);
  }
}
</script>

This returns "undefined". What can I do to be able to get my data object from one page to another?

Upvotes: 1

Views: 3830

Answers (1)

captainskippah
captainskippah

Reputation: 1535

params is for path parameter.

If you have a route like this: /user/:id

You can do $router.push({ name: 'user', params: { id: 'abc123' })

and you can access the dynamic parameter's value via $route.params.id (no r on the $route).

If path parameter is not necessary, you can also just use query string:

router.push({ path: 'register', query: { plan: 'private' } })

It will result in: /register?plan=private

You can then access the value via $route.query.plan

Docs: https://router.vuejs.org/guide/essentials/navigation.html

Although honestly you can simply just do:

$router.push('/user/abc123') or $router.push('/register?plan=private')

Upvotes: 1

Related Questions