Javascript 使用程序化导航 Vue.js 传递道具
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45151810/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Passing props with programmatic navigation Vue.js
提问by Ash
I have a Vue component that has a prop named 'title' e.g:
我有一个 Vue 组件，它有一个名为“title”的道具，例如：
<script>
export default {
props: ['title'],
data() {
return {
}
}
}
</script>
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:
在某个操作完成后，我以编程方式导航到组件。有没有办法在设置 prop 值的同时以编程方式路由用户？我知道你可以创建一个这样的链接：
<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' })
EDIT:
编辑：
As suggested I've changed my route to the following:
根据建议，我已将路线更改为以下内容：
{
path: '/i/:imageID',
component: Image,
props: true
}
And the navigation to the following:
并导航到以下内容：
this.$router.push({ path: '/i/15', params: {title: 'test title' }})
However, my Image component (template - see below) still doesn't show any title.
但是，我的 Image 组件（模板 - 见下文）仍然没有显示任何标题。
<h1>{{ title}}</h1>
Is there anything that could be causing issues?
有什么可能导致问题的吗？
回答by Bert
Use params.
使用参数。
this.$router.push({ name: 'foo', params: {title: 'test title' }})
Note: You have to specify name. This does not work if you call this.$router.pushusing path.
注意：您必须指定name. 如果您调用this.$router.pushusing ，这将不起作用path。
And set the route to accept params as props.
并设置路由以接受 params 作为道具。
{path: "/foo", name:"foo", component: FooComponent, props: true}
props: trueis documented here.
props: true被记录在这里。
回答by Steven Spungin
The vue-router docs clearly state paramsonly work with nameand not path.
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
If you use path, pass the params in the path itself or use queryas demonstrated below:
如果您使用path，请在路径本身中传递参数或使用query如下所示：
router.push({ path: `/user/${userId}` }) // -> /user/123
// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
回答by bresson
Running into the same problem with children routes defined in router. router.js below shows children routes mapped to named
遇到与路由器中定义的子路由相同的问题。下面的 router.js 显示了映射到命名的子路由
<router-view name="create"></router-view>
<router-view name="dashboard"></router-view>
router.js
路由器.js
{
path: "/job",
name: "Job",
component: () => import("./views/JobPage"),
children: [
{
path: "create",
name: "JobCreate",
components: {
create: JobCreate
}
},
{
path: ":id",
name: "JobConsole",
components: {
dashboard: JobConsole
}
}
]
},
When I attempt to pass props from create, vue-router fails to capture the dynamic route matching needed for JobConsole:
当我尝试从 create 传递 props 时，vue-router 无法捕获 JobConsole 所需的动态路由匹配：
this.$router.push(
{
name: "Job",
params: {
id: this.ID_From_JobCreate
}
)
