将 props 传递给 Vue-router 实例化的 Vue.js 组件 [英] Passing props to Vue.js components instantiated by Vue-router

问题描述

假设我有一个像这样的 Vue.js 组件:

Suppose I have a Vue.js component like this:

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

我想在 vue-router 中的某个路由匹配时使用它:

And I want to use it when some route in vue-router is matched like this:

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

通常为了将myProps"传递给组件，我会执行以下操作:

Normally in order to pass 'myProps' to the component I would do something like this:

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

并在 html 中:

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

在这种情况下，当路由匹配时，路由器会自动在路由器视图元素中绘制组件.

In this case, the router is drawing automatically the component in the router-view element when the route is matched.

我的问题是，在这种情况下，如何将道具传递给组件?

My question is, in this case, how can I pass the the props to the component?

推荐答案

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

并在您的组件中添加道具:

and in your components just add prop:

props: {
      someValueToPass: String
    },

vue-router 会匹配组件中的 prop

vue-router will match prop in component

这篇关于将 props 传递给 Vue-router 实例化的 Vue.js 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！