我有一个 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>
有什么可能导致问题吗?
原文由 Ash 发布,翻译遵循 CC BY-SA 4.0 许可协议
使用参数。
注意:您必须指定
name
。如果您使用path
调用this.$router.push
这将不起作用。并设置接受参数作为道具的路线。
props: true
记录在这里。