web-dev-qa-db-fra.com

Passer des accessoires aux composants Vue.js instanciés par Vue-router

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

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

Et je veux l'utiliser quand une route dans vue-router est assortie comme ceci:

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

Normalement, afin de transmettre "myProps" au composant, je ferais quelque chose comme ceci:

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

et dans le html:

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

Dans ce cas, le routeur dessine automatiquement le composant dans l'élément router-view lorsque la route est mise en correspondance.

Ma question est, dans ce cas, comment puis-je passer les accessoires au composant?

vue.jsvue-router
31
Robert
<router-view :some-value-to-pass="localValue"></router-view>

et dans vos composants, ajoutez simplement prop:

props: {
      someValueToPass: String
    },

vue-router correspond à prop dans le composant

46
lukpep
 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 }
        }
      ]
    })

Mode objet

const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
  ]
})

Telle est la réponse officielle . link

4
aboutqx

Dans le routeur,

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

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

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

malheureusement, aucune des solutions précédentes ne répond réellement à la question. Voici donc celle de quora

essentiellement la partie que docs n'explique pas bien est 

Lorsque props est défini sur true, le route.params sera défini en tant que props du composant.

donc ce dont vous avez réellement besoin lors de l'envoi de l'accessoire par la route est de l'affecter à la clé params ex

this.$router.Push({
    name: 'Home',
    params: {
        theme: 'dark'
    }
})

donc l'exemple complet 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
    }
})
3
ctf0

Utilisation:

this.$route.MY_PROP

obtenir un accessoire de route

0
user742030