Discussion :

[pifouxx]

Bonjour,

Je voudrais utiliser des variables générales (comme le titre de l'appli, la langue par défaut, le chemin vers son logo, ...) dans des composants que j'appelle avec vue.router.
Actuellement, je fais cela:
main.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
import App from './App.vue'
import router from './router.js'
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

router.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      props: true,
      component: Home
    }, ...

App.vue

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div id="app">
    <router-view/>
    </div>
  </div>
</template>
 
export default {
  data() {
    return {
      titre: "AAAAA",
      logo: require("./assets/logo.png"),
    };
  },....
};

et enfin Home.vue

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <div>
     {{titre}} {{logo}}
  </div>
</template>
 
export default {
  props: {
    titre: String,
    logo: String
  },....
}

et je voudrais récupérer les valeurs les "data" de App.vue dans Home.vue.
En composant enfant, je le fais en utilisant les propriétés, mais je voudrais le faire via vue.router.

Etant débutant avec Vue.js, peut être que je ne l'utilise pas correctement, mais je coince totalement.

Merci pour votre aide et votre indulgence.

Marco

[pifouxx]

Youhou !! J'ai trouvé.

Il faut ajouter les propriétés dans le <router-view>, comme ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<router-view :config="config"></router-view>

Pour simplifier, j'ai rassemblé toutes mes propriétés de configuration dans un objet.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
data() {
    return {
      config: {
        titre: "AAAAAA",
        logo: require("./assets/logo.png")
      }
    };
  },

Merci à ceux qui ont pris le temps de lire mon message.

Marco