使用程序化导航Vue.js传递道具 [英] Passing props with programmatic navigation Vue.js

问题描述

我有一个Vue组件，其中有一个名为'title'的道具，例如：

I have a Vue component that has a prop named 'title' e.g:

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

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

I navigate to the component programmatically after a certain action is complete. Is there a way to programmatically route a user while also setting the prop value? I know you can create a link like this:

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

但是，有没有办法做以下的事情？

However, is there a way to do something like the following?

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

编辑：

根据建议，我已将路线更改为以下内容：

As suggested I've changed my route to the following:

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

导航到以下内容：

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

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

However, my Image component (template - see below) still doesn't show any title.

<h1>{{ title}}</h1>

有什么可能导致问题吗？

Is there anything that could be causing issues?

推荐答案

使用params。

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

注意：您必须指定 name 。如果你使用路径调用这个。$ router.push ，这不起作用。

Note: You have to specify name. This does not work if you call this.$router.push using path.

并设置接受params作为道具的路线。

And set the route to accept params as props.

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

props：true 此处记录 。

这篇关于使用程序化导航Vue.js传递道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！