0

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?

Zyzyx
  • 492
  • 4
  • 18
  • 1
    Alternatively you can use Vuex store for data that will be shared between multiple pages. – Muge Jan 17 '22 at 13:18
  • I am trying this, but I'm having a hard time since all the examples seem to use vue in a different way from the vue files I've gotten. Mainly I dont have the regular `export default {}` where you can have `name:` `props:` etc. Any way to bridge this? – Zyzyx Jan 18 '22 at 10:36
  • 1
    It looks like the file difference is mostly from Typescript. I haven't used Vue with TS before so I'm not familiar with what you have. Have you looked into Vuex-Typescript support? The examples might be more relevant. – Muge Jan 20 '22 at 09:03

1 Answers1

1

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')

captainskippah
  • 1,350
  • 8
  • 16
  • Hey this seems useful! I'm wondering however can it send something other than a string? I have a data object which is essentially an array of strings I'm trying to pass. – Zyzyx Jan 18 '22 at 08:40
  • 1
    You can do `?strings[]=a&strings=b` or `?strings=a,b,c` or maybe something else like encoding it to base64. Might worth searching about how to do string array with query strings. – captainskippah Jan 18 '22 at 16:23