vue.js - route - vuejs

Pasar accesorios a componentes Vue.js instanciados por Vue-router

Question

Supongamos que tengo un componente Vue.js como este:

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

Y quiero usarlo cuando alguna ruta en vue-router coincida así:

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

Normalmente, para pasar ''myProps'' al componente, haría algo como esto:

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

y en el html:

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

En este caso, el enrutador está dibujando automáticamente el componente en el elemento de vista del enrutador cuando la ruta coincide.

Mi pregunta es, en este caso, ¿cómo puedo pasar los accesorios al componente?

Answer 1

En el enrutador,

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

Y dentro del componente <Bar /> ,

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

Answer 2

Utilizar:

this.$route.MY_PROP

para obtener un apoyo de ruta

Answer 3

lamentablemente, ninguna de las quora realmente responde la pregunta, así que aquí hay una de quora

básicamente la parte que los docs no explican bien es

Cuando props se establece en true, route.params se establecerá como los accesorios del componente.

Entonces, lo que realmente necesita al enviar el accesorio a través de la ruta es asignarlo a la tecla de params ex

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

entonces el ejemplo completo sería

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

Answer 4

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

Modo de objeto

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

Esa es la respuesta oficial. link

Answer 5

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

y en tus componentes solo agrega utilería:

props: {
      someValueToPass: String
    },

vue-router coincidirá con el accesorio en el componente