使用编程导航 Vue.js 传递道具

Posted 2023-02-22

【中文标题】使用编程导航 Vue.js 传递道具

【英文标题】：Passing props with programmatic navigation Vue.js

【发布时间】：2017-12-22 10:30:39

【问题描述】：

我有一个 Vue 组件，它有一个名为“title”的道具，例如：

<script>
export default 
  props: ['title'],
  data() 
    return 
    
  

</script>

在某个操作完成后，我以编程方式导航到组件。 有没有办法在设置道具值的同时以编程方式路由用户？我知道您可以创建这样的链接：

<router-link to="/foo" title="example title">link</router-link>

但是，有没有办法执行以下操作？

this.$router.push( path: '/foo', title: 'test title' )

编辑：

按照建议，我已将路线更改为：

   
      path: '/i/:imageID',
      component: Image,
      props: true
    

然后导航到以下内容：

this.$router.push( path: '/i/15', params: title: 'test title' )

但是，我的图像组件（模板 - 见下文）仍然没有显示任何标题。

<h1> title</h1>

有什么可能导致问题吗？

【参考方案1】：

使用参数。

this.$router.push( name: 'foo', params: title: 'test title' )

注意：您必须指定name。如果您使用path 调用this.$router.push，这将不起作用。

并设置路由接受参数作为道具。

path: "/foo", name:"foo", component: FooComponent,  props: true

props: true 是documented here。

【讨论】：

@AshleyB 这最终会按名称工作，而不是按路径工作。我没有解释为什么不按路径，但他们肯定会在文档中按名称进行。 codepen.io/Kradek/pen/eRapoZ?editors=1010

确认它仍然可以按名称工作，但不能按路径工作：router.push(name: 'routeName', params: whatever: 'andEver')

这是否意味着您不能这样做？ path: "/foo/:id", name: "foo", component: FooComponent, props: true -push - routers.push(name:"foo", params:id:7, user: userObject )

只是为了澄清@Bert 的回答，from the docs：注意：如果提供了路径，则忽略参数，这不是查询的情况，如上面的示例所示。相反，您需要提供路线的名称或使用任何参数手动指定整个路径

重要的是要提到参数值也必须在“查询”中的路由处，并且可以通过 this.$route.params.Yourparam 访问

【参考方案2】：

vue-router 文档明确指出 params 仅适用于 name 而不适用于 path。

// set  props: true in your route definition
const userId = 123
router.push( name: 'user', params:  userId ) // -> /user/123
// This will NOT work
router.push( path: '/user', params:  userId ) // -> /user

如果您使用path，请在路径本身中传递参数或使用query，如下所示：

router.push( path: `/user/$userId` ) // -> /user/123

// with query, resulting in /register?plan=private
router.push( path: 'register', query:  plan: 'private' )

【参考方案3】：

在路由器中定义的子路由遇到同样的问题。下面的 router.js 显示了映射到命名的子路由

<router-view name="create"></router-view>
<router-view name="dashboard"></router-view>

路由器.js

    
      path: "/job",
      name: "Job",
      component: () => import("./views/JobPage"),
      children: [
        
          path: "create",
          name: "JobCreate",
          components: 
            create: JobCreate
          
        ,
        
          path: ":id",
          name: "JobConsole",
          components: 
            dashboard: JobConsole
          
        
      ]
    ,

当我尝试从 create 传递 props 时，vue-router 无法捕获 JobConsole 所需的动态路由匹配：

      this.$router.push(
        
          name: "Job",
          params: 
            id: this.ID_From_JobCreate
          
      )