web-dev-qa-db-ja.com

Vue-routerによってインスタンス化されたVue.jsコンポーネントに小道具を渡す

次のようなVue.jsコンポーネントがあるとします。

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

そして、私はvue-routerのいくつかのルートが次のように一致するときにそれを使用したい：

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

通常、「myProps」をコンポーネントに渡すには、次のようなことをします。

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

そして、HTMLで：

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

この場合、ルートが一致すると、ルーターはrouter-view要素のコンポーネントを自動的に描画します。

私の質問は、この場合、小道具をコンポーネントにどのように渡すことができますか？

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

そして、コンポーネントにpropを追加するだけです：

props: {
      someValueToPass: String
    },

vue-routerはコンポーネント内のpropと一致します

55
lukpep

悲しいことに、前のソリューションのどれも実際に質問に答えないので、ここでは quora

基本的に docs でうまく説明できない部分は

Propsがtrueに設定されると、route.paramsがコンポーネントpropsとして設定されます。

ルートを通じてプロップを送信するときに実際に必要なのは、paramsキーexにそれを割り当てることです

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

したがって、完全な例は

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

ルーターでは、

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

そして<Bar />コンポーネント内で、

var Bar = Vue.extend({
    props: ['authorName'],
    template: '<p>Hey, {{ authorName }}</p>'
});
5
Jegadesh B S
 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 }
        }
      ]
    })

オブジェクトモード

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

それが公式の答えです。 リンク

3
aboutqx

つかいます：

this.$route.MY_PROP

ルートプロップを取得する

0
user742030