web-dev-qa-db-fra.com

Comment passer un objet comme accessoire avec le routeur vue?

J'ai le violon suivant https://jsfiddle.net/91vLms06/1/

const CreateComponent = Vue.component('create', {
  props: ['user', 'otherProp'],
  template: '<div>User data: {{user}}; other prop: {{otherProp}}</div>'
});

const ListComponent = Vue.component('List', {
  template: '<div>Listing</div>'
});

const app = new Vue({
  el: '#app',
  router: new VueRouter(),
  created: function () {
    const self = this;
        // ajax request returning the user
    const userData = {'name': 'username'}

    self.$router.addRoutes([
      { path: '/create', name: 'create', component: CreateComponent, props: { user: userData }},
      { path: '/list', name: 'list', component: ListComponent },
      { path: '*', redirect: '/list'}
    ]);
    self.$router.Push({name: 'create'}); // ok result: User data: { "name": "username" }; other prop:
    self.$router.Push({name: 'list'}); // ok result: Listing

    // first attempt
    self.$router.Push({name: 'create', props: {otherProp: {"a":"b"}}}) // not ok result: User data: { "name": "username" }; other prop:
    self.$router.Push({name: 'list'}); // ok result: Listing

    // second attempt
    self.$router.Push({name: 'create', params: {otherProp: {"a":"b"}}}) //not ok result: User data: { "name": "username" }; other prop:
  }
});

Comme vous pouvez le voir en premier, je passe à CreateComponent le user juste au moment où j'initialise l'itinéraire.

Plus tard, je dois passer une autre propriété otherProp et garder toujours le paramètre user. Lorsque j'essaie de le faire, l'objet que j'envoie n'est pas transmis au composant.

Comment passer le otherProp tout en conservant le user?

Le vrai but du otherProp est de remplir un formulaire avec les données qu'il contient. Dans la partie liste, j'ai l'objet et lorsque je clique sur le bouton "modifier", je veux remplir le formulaire avec les données provenant de la liste.

javascriptvue.jsvuejs2vue-router
16
tzortzik

Cela peut fonctionner en utilisant mode Fonction des accessoires et params

démo: https://jsfiddle.net/jacobgoh101/mo57f0ny/1/

lors de l'ajout de routes, utilisez mode Fonction des accessoires pour qu'il ait une propriété par défaut user et il ajoutera route.params comme accessoires.

{
    path: '/create',
    name: 'create',
    component: CreateComponent,
    props: (route) => ({
        user: userData,
        ...route.params
    })
}

les paramètres passés dans Push seront automatiquement ajoutés aux accessoires.

self.$router.Push({
    name: 'create',
    params: {
        otherProp: {
            "a": "b"
        }
    }
})
21
Jacob Goh