it-swarm.com.de

Übergeben von Requisiten an Vue.js-Komponenten, die vom Vue-Router instanziiert werden

Angenommen, ich habe eine Vue.js-Komponente wie diese:

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

Und ich möchte es verwenden, wenn eine Route in vue-router wie folgt passt:

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

Um 'myProps' an die Komponente zu übergeben, würde ich normalerweise Folgendes tun:

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

und in der HTML:

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

In diesem Fall zeichnet der Router automatisch die Komponente im Router-View-Element, wenn die Route abgeglichen wird.

Meine Frage ist in diesem Fall, wie kann ich die Requisiten an die Komponente übergeben?

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

und fügen Sie in Ihren Komponenten einfach die Requisite hinzu:

props: {
      someValueToPass: String
    },

vue-router stimmt mit der Komponente in der Komponente überein

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

Objektmodus

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

Das ist die offizielle Antwort . link

4
aboutqx

Im Router

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

Und in der <Bar />-Komponente

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

leider beantwortet keine der vorherigen Lösungen die Frage, hier ist also eine Eins von quora

grundsätzlich ist der Teil, den docs nicht gut erklärt, der 

Wenn Requisiten auf true gesetzt sind, wird der route.params als Komponentenrequisiten festgelegt.

wenn Sie also die Requisite über die Route schicken, müssen Sie sie der params-Taste ex zuweisen

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

so wäre das vollständige Beispiel

// 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

Benutzen:

this.$route.MY_PROP

eine Route bekommen

0
user742030