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