假设我有一个像这样的 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.js vue-router
这个问题很老，所以我不确定在提出问题时Function mode 是否存在，但它只能用于传递正确的道具。它仅在路由更改时调用，但所有 Vue 反应性规则都适用于您传递的任何内容，如果它已经是反应性数据。
// Router config:
components:
{
default: Component0,
named1: Component1
},
props:
{
default: (route) => {
// <router-view :prop1="$store.importantCollection"/>
return { prop1: store.importantCollection }
},
named1: function(route) {
// <router-view :anotherProp="$store.otherData"/>
return { anotherProp: store.otherData }
},
}
请注意，这仅适用于您的 prop 函数的作用域，以便它可以看到您要传递的数据。 route 参数不提供对 Vue 实例、Vuex 或 VueRouter 的引用。此外，named1 示例演示了this 也未绑定到任何实例。这似乎是设计使然，因此状态仅由 URL 定义。由于这些问题，最好使用在标记中接收正确道具并让路由器切换它们的命名视图。
// Router config:
components:
{
default: Component0,
named1: Component1
}
<!-- Markup -->
<router-view name="default" :prop1="$store.importantCollection"/>
<router-view name="named1" :anotherProp="$store.otherData"/>
使用这种方法，您的标记声明哪些视图是可能的并设置它们的意图，但路由器决定激活哪些视图。
【讨论】：
<div>。
用途：
this.$route.MY_PROP
获取路线道具
【讨论】：
遗憾的是，上一个解决方案实际上都没有回答这个问题，所以这里有一个来自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
}
})
【讨论】：
在路由器中，
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>'
});
【讨论】：
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 } }
]
})
这是官方的回答。 link
【讨论】：
new Vue({ data: ...)
<router-view :some-value-to-pass="localValue"></router-view>
在你的组件中添加 prop:
props: {
someValueToPass: String
},
vue-router 会匹配组件中的 prop
【讨论】：
props: ["prop1", "prop2", "prop3"] 可以在这里找到更多vuejs.org/guide/components.html#Props
<router-view> 上绑定我的道具时，我收到以下错误Attribute ":my_prop" is ignored on component <router-view> because the component is a fragment instance。知道有什么问题吗？