web-dev-qa-db-fra.com

Passer des accessoires avec la navigation programmatique Vue.js

J'ai un composant Vue qui a un accessoire nommé "titre", par exemple:

<script>
export default {
  props: ['title'],
  data() {
    return {
    }
  }
}
</script>

Je navigue vers le composant par programme après qu'une certaine action est terminée. Existe-t-il un moyen d'acheminer un utilisateur par programme tout en définissant la valeur prop? Je sais que vous pouvez créer un lien comme celui-ci:

<router-link to="/foo" title="example title">link</router-link>

Cependant, y a-t-il un moyen de faire quelque chose comme ce qui suit?

this.$router.Push({ path: '/foo', title: 'test title' })

MODIFIER:

Comme suggéré, j'ai changé mon itinéraire comme suit:

   {
      path: '/i/:imageID',
      component: Image,
      props: true
    }

Et la navigation vers le suivant:

this.$router.Push({ path: '/i/15', params: {title: 'test title' }})

Cependant, mon composant Image (modèle - voir ci-dessous) n'affiche toujours aucun titre.

<h1>{{ title}}</h1>

Y at-il quelque chose qui pourrait causer des problèmes?

javascriptvue.jsvuejs2vue-router
19
Ashley B

Utilisez params.

this.$router.Push({ name: 'foo', params: {title: 'test title' }})

Remarque: Vous devez spécifier name. Cela ne fonctionne pas si vous appelez this.$router.Push en utilisant path.

Et définissez la route pour accepter les paramètres comme accessoires.

{path: "/foo", name:"foo", component: FooComponent,  props: true}

props: true est documenté ici .

49
Bert

Les paramètres de la vue-router indiquent clairement que les paramètres ne fonctionnent qu'avec le nom et pas le chemin.

// set  props: true in your route definition
const userId = 123
router.Push({ name: 'user', params: { userId }}) // -> /user/123
// This will NOT work
router.Push({ path: '/user', params: { userId }}) // -> /user

Si vous utilisez path, transmettez les paramètres dans le chemin lui-même ou utilisez la requête comme indiqué ci-dessous:

router.Push({ path: `/user/${userId}` }) // -> /user/123

// with query, resulting in /register?plan=private
router.Push({ path: 'register', query: { plan: 'private' }})
4
Steven Spungin