将 props 传递给 Vue-router 实例化的 Vue.js 组件

Posted 2023-02-22

【中文标题】将 props 传递给 Vue-router 实例化的 Vue.js 组件

【英文标题】：Passing props to Vue.js components instantiated by Vue-router

【发布时间】：2016-10-22 13:54:04

【问题描述】：

假设我有一个像这样的 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 元素中的组件。

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

【参考方案1】：

这个问题很老，所以我不确定在提出问题时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"/>

使用这种方法，您的标记声明哪些视图是可能的并设置它们的意图，但路由器决定激活哪些视图。

【讨论】：

非常感谢。文档绝对应该包含带有组件和功能模式的示例，其用法与单个“组件”的用法不同。无论如何，由于紧急需求，我有点讨厌组件和组件选项的语法略有不同。

命名视图似乎是我需要的，但我收到一个 linting 错误“模板根需要一个元素”你碰巧知道解决这个问题的方法吗？

您需要将模板代码封装在一个元素中，例如<div>。

【参考方案2】：

用途：

this.$route.MY_PROP

获取路线道具

【讨论】：

他要先设置。

【参考方案3】：

遗憾的是，上一个解决方案实际上都没有回答这个问题，所以这里有一个来自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
    
) 

【讨论】：

是不是只能通过命名路由来实现？

没有router.vuejs.org/guide/essentials/…，但最好使用命名路由“更易于维护”

【参考方案4】：

在路由器中，

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】：

 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

【讨论】：

在这种情况下，实际上应该在哪里传递字符串“hello”？

在官方文档中进一步阅读：“当 props 设置为 true 时，route.params 将被设置为组件 props。”作者在问如何设置自定义值“hello”

我喜欢人们只是复制和粘贴无法回答问题的官方文档。我们都看过官方文档，它没有回答 OP 的问题，所以在没有解释或澄清的情况下再次粘贴它并走开不会增加帖子的价值。

有没有办法传递 app.data 中定义的绑定数据数组？ (new Vue( data: ...)

【参考方案6】：

<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

@lukpep 我遇到了类似的情况，当我在<router-view> 上绑定我的道具时，我收到以下错误Attribute ":my_prop" is ignored on component <router-view> because the component is a fragment instance。知道有什么问题吗？

这可能是个坏主意。当用户直接通过 URL 访问时会发生什么？

另外，这个道具不会被传递给所有路由组件，而不仅仅是那些实际使用它的组件吗？

那么一个人是如何真正达到所要求的结果的呢？