En mi única página tengo una tabla, donde se ejecuta lo siguiente después de hacer clic en una fila:
public onRowDataClick(workItem){ this.$router.push({ path: '/SecondPageView', params: {pushedData: workItem} }); }Esta es mi ruta:
{ path: '/SecondPageView', name: 'SecondPage', component: SecondPage, meta: { requiresAuth: true, }, }, La siguiente página se carga bien, y ahora quiero poder usar pushedData , pero no estoy completamente seguro de cómo debería funcionar esto.
Intenté seguir la respuesta anterior de stackoverflow aquí , pero no puedo configurarlo de la misma manera debido a cómo está configurada mi clase. No me deja tener props: después de mi export default ... .
Basado en el material de lectura aquí y la respuesta anterior, he configurado lo siguiente:
<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>Esto devuelve "indefinido". ¿Qué puedo hacer para poder pasar mi objeto de datos de una página a otra?
params es para el parámetro de ruta.
Si tiene una ruta como esta: /user/:id
Puede hacer $router.push({ name: 'user', params: { id: 'abc123' })
y puede acceder al valor del parámetro dinámico a través $route.params.id (no r en $route ).
Si el parámetro de ruta no es necesario, también puede usar la cadena de consulta:
router.push({ path: 'register', query: { plan: 'private' } })
Dará como resultado: /register?plan=private
Luego puede acceder al valor a través $route.query.plan
Documentos: https://router.vuejs.org/guide/essentials/navigation.html
Aunque, sinceramente, simplemente puedes hacer:
$router.push('/user/abc123') o $router.push('/register?plan=private')