En passant accessoires Vue.js composants instanciés par Vue-routeur

Supposons que j'ai un Vue.js composant comme ceci:

var Bar = Vue.extend({
    props: ['my-props'],
    template: '<p>This is bar!</p>'
});

Et je veux l'utiliser quand une route en vue-routeur est assorti comme ceci:

router.map({
    '/bar': {
        component: Bar
    }
});

Normalement afin de passer 'myProps" pour le composant, je voudrais faire quelque chose comme ceci:

Vue.component('my-bar', Bar);

et dans le code html:

<my-bar my-props="hello!"></my-bar>

Dans ce cas, le routeur est dessin automatiquement le composant dans le routeur-elément de vue lorsque l'itinéraire est mis en correspondance.

Ma question est, dans ce cas, comment puis-je transmettre les accessoires pour le composant?

InformationsquelleAutor Robert | 2016-06-21

vue-router vue.js

51
```
<router-view :some-value-to-pass="localValue"></router-view>
```
et dans vos composants juste ajouter prop:
```
props: {
      someValueToPass: String
    },
```
vue-routeur match prop dans la composante
- sinon, props: ["prop1", "prop2", "prop3"] plus peut être trouvé ici vuejs.org/guide/components.html#Props
- J'ai couru dans quelque chose de similaire, lorsque je lier mon hélice sur <router-view>, j'ai obtenu l'erreur suivante Attribute ":my_prop" is ignored on component <router-view> because the component is a fragment instance. Toute idée de ce qui est mal?
- Cela peut être une mauvaise idée. ce qui se passe lorsque l'utilisateur arrive directement via l'URL ?
- Aussi, ne serait-ce pas prop être passé à tous les acheminé composants et pas seulement de ceux qui l'utilisent effectivement?
- oui, cela se sent mal.
- Alors, comment fait-on réellement atteint le résultat souhaité, comme demandé?
InformationsquelleAutor lukpep

Dans le routeur,

const router = new VueRouter({
  routes: [
    { path: 'YOUR__PATH', component: Bar, props: { authorName: 'Robert' } }
  ]
})

Et à l'intérieur de la <Bar /> composant,

var Bar = Vue.extend({
    props: ['authorName'],
    template: '<p>Hey, {{ authorName }}</p>'
});

InformationsquelleAutor Jegadesh B S

5

malheureusement non de la prev solutions répond à la question donc, ici, est un de quora

essentiellement la partie qui docs n'explique pas bien est

Lorsque des accessoires est définie sur true, le route.params sera définie en tant que composant d'accessoires.

donc, ce que vous avez réellement besoin lors de l'envoi de l'hélice par le biais de la route est à attribuer à la params clé ex
```
this.$router.push({
    name: 'Home',
    params: {
        theme: 'dark'
    }
})
```
l'exemple serait
```
//component
const User = {
  props: ['test'],
  template: '<div>User {{ test }}</div>'
}

//router
new VueRouter({
  routes: [
    { 
      path: '/user',
      component: User,
      name: 'user',
      props: true 
    }
  ]
})

//usage
this.$router.push({
    name: 'user',
    params: {
        test: 'hello there' //or anything you want
    }
}) 
```
- Ça veut dire que cela ne peut être réalisé avec des routes nommées?
- pas de router.vuejs.org/guide/essentials/..., mais il est mieux d'utiliser des routes nommées "plus facile à maintenir"
InformationsquelleAutor ctf0
3
```
 const User = {
      props: ['id'],
      template: '<div>User {{ id }}</div>'
    }
    const router = new VueRouter({
      routes: [
        { path: '/user/:id', component: User, props: true }

        //for routes with named views, you have to define the props option for each named view:
        {
          path: '/user/:id', 
          components: { default: User, sidebar: Sidebar },
          props: { default: true, sidebar: false }
        }
      ]
    })
```
Objet de mode
```
const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
  ]
})
```
C'est la réponse officielle.
lien
- Dans cette situation, où l'on fait passer dans la chaîne de caractères "bonjour", comme l'avait demandé?
- Lire la suite dans l'officiel des docs: "Lorsque des accessoires est définie sur true, la route.params sera définie en tant que composant d'accessoires." L'auteur a été demandé comment personnaliser la valeur "bonjour"
- J'aime quand les gens il suffit de copier et coller la documentation officielle qui ne répond pas à la question. Nous avons tous vu la documentation officielle et il ne marche pas répondre à l'OP de la question, afin de le coller à nouveau avec pas d'explications ou de précisions et de s'éloigner de ne pas ajouter de la valeur à la poste.
- est-il un moyen de passer lier les données de tableau qui est défini dans l'application.les données? (new Vue({ data: ...)
InformationsquelleAutor aboutqx
0

Utilisation:
```
this.$route.MY_PROP
```
pour obtenir un itinéraire prop
- Il veut d'abord.
InformationsquelleAutor

Vous devez vous connecter pour publier un commentaire.