Passage de propriétés

Bonjour,
Comme beaucoup ici je crois, je débute avec Vue.js et je galère un peu.
J’essaye de faire passer des données (propriétés ?) d’un composant à un autre, mais à travers vue-router.
En fait, je voudrais définir des datas dans mon “app.vue” qui soient utilisables par tous les composants que je pourrais appeler via vue.router (en gros il s’agit de données de configuration, comme le titre, la couleur principale, l’ordre d’affichage par défaut, etc…).
Voici l’état de mon code actuellement:
main.js:

import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)

let router = new VueRouter({
mode: ‘history’,
routes: [{
path: ‘/seances’,
name: ‘seances’,
props: {titre:“TEST”},
component: require(’./pages/seances.vue’).default
}]
})

let vm = new Vue({
el: ‘#app’,
router,
render: h => h(require(’./App.vue’).default)
})

app.vue:

<template>
  <div id="app">
    <main id="page-wrap">
      <div class="main">
        <router-view></router-view>
      </div>
    </main>
  </div>
</template>

<script>
 export default {
  data() {
    return {
      titre: "CINEPAX",
      logo: "/src/assets/logo.png"
    };
  }
};

seances.vue:

<template>
  <div>
    <h2>{{titre}}</h2>
  </div>
</template>
<script>

export default {
   props: ['titre']
};
</script>

Ca marche à moitié. Dans seances.vue, {{titre]] affiche "TEST, la valeur indiqué dans l’initialisation de VueRouteur dans main.js, mais je n’arrive pas à lui dire d’utiliser la valeur de titre indiqué dans app.vue (“CINEPAX” en l’occurrence).
J’espère être clair.
J’ai nettoyé le code de tout ce qui ne me paraissait sans importance pour mon problème.

Il est également fort possible que je me trompe totalement dans l’utilisation de Vue.js.

Merci d’avance d’éclairer mes longues et sombres nuits de travail ;-).

Marco

Hello Marco,

Je passais par là et je me suis dit tient je vais répondre :slight_smile:

En fait, il fait ce qu’il doit faire, dans ta route : tu définis une prop
props: {titre:“TEST”},

De fait ton composant seances.vue est appelé avec la prop définie dans la route.

L’App.vue défini la data

return {
      titre: "CINEPAX",
      logo: "/src/assets/logo.png"
    }

Mais elle n’est utilisable que dans le composant.

Un paramètre à passer dans ta route peut-être pour utiliser le bon titre?

PY.

HelloPyve et merci d’avoir pris le temps de me répondre.

Je suis d’accord avec toi, mais c’est le mieux que j’ai pu obtenir.
Je n’ai pas réussi à changer la valeur statique “TEST” par une propriété dynamique, par exemple avec un this.titre.
J’ai essayé des tas de trucs, mais rien n’a marché.
J’ai cherché aussi sur internet, rien trouvé qui explique “comment transmettre une propriété à un composant via Vue-router”
La seule solution qui fonctionne mais qui ne me convient pas, c’est d’utiliser les paramètres de l’URL, mais je voudrais pouvoir transmettre moultes propriétés !
Merci pour ton aide
Marco

J’ai trouvé.:grinning:

Il faut ajouter les propriétés dans le router-view, comme ca:
<router-view :titre="titre" :logo="logo></router-view>

Merci à tous.
Marco

1 Like