[英]Vue cli passing props (data) through router-link
I am using Vue-cli
with vue-router installed, inside my App.vue
I've got <router-link to="/about" >About</router-link>
in which it's going to display the content of about component on click.我正在使用安装了 vue-router 的
Vue-cli
,在我的App.vue
我有<router-link to="/about" >About</router-link>
,它将在其中显示 about 组件的内容单击时。 Now, I would like to pass props data to About.vue
component from `` App.vue.现在,我想将 props 数据从
About.vue
传递给About.vue
组件。 Adding :myprops="myprops" inside <router-link to="/about" :myprops="myprops">About</router-link>
didn't work that's why I add the following to App.vue
:在
<router-link to="/about" :myprops="myprops">About</router-link>
中添加<router-link to="/about" :myprops="myprops">About</router-link>
不起作用,这就是我将以下内容添加到App.vue
:
<script>
import About from './components/About.vue';
export default {
name: 'App',
components:{'my-about':About}
data(){return {...}
},
props:{myprops:[{.....}]}
}
</script>
Inside About.vue
component I did props:['myprops']
to get the props data and by using {{myprops}}
to display it.在
About.vue
组件中,我做了props:['myprops']
来获取道具数据并使用{{myprops}}
来显示它。 Now, if inside App.vue
, I add <my-about :myprops="myprops"></my-about>
then the props data will be handed over to About.vue
and will be display but the content of About.vue
also will be display on my App.vue
page and also, it is going to repeat itself inside About.vue
.现在,如果在
App.vue
,我添加<my-about :myprops="myprops"></my-about>
那么 props 数据将被移交给About.vue
并且将显示但About.vue
的内容也将显示在我的App.vue
页面上,并且它会在About.vue
重复。 I don't want that.我不想要那个。 I just need to pass the
myprops
data to About.vue
component without displaying the About.vue
content inside App.vue
.我只需要通过
myprops
数据About.vue
组件而不显示About.vue
里面的内容App.vue
。 And, this is my path code inside router/index.js
for reference: { path: '/about', component: About }
而且,这是我在
router/index.js
路径代码以供参考: { path: '/about', component: About }
How can I be able to do that?我怎么能做到这一点?
This assumes you are not a beginner at Vue.这假设您不是 Vue 的初学者。
1 - Define a prop on the target component 1 - 在目标组件上定义一个 prop
export default {
name: "MyComponent",
props: {
exampleProp: Object
}
}
2 - Define a route with props: true 2 - 使用props: true定义路线
...
routes: [
{
path: '/mycomponent',
name: 'MyComponent',
component: MyComponent,
props: true
},
...
3 - Use route name on the router-link instead of path, and pass the props as params. 3 - 在路由器链接上使用路由名称而不是路径,并将道具作为参数传递。
<router-link
:to="{ name: 'MyComponent',
params: { exampleProp: examplePropValue }}">
Link to My Component
</router-link>
A Router is not meant to be used to pass data around.路由器不是用来传递数据的。 It's meant to map URLs to coponents.
它旨在将 URL 映射到组件。 So what you can do is to pass the props in the URL, as params or query parameters.
所以你可以做的是在 URL 中传递 props,作为 params 或查询参数。 (If hat doesn't suit your requirements, you will likely need a real state management solution like Vuex)
(如果 hat 不符合您的要求,您可能需要像 Vuex 这样的真实状态管理解决方案)
A Param has to be defined in the route definition (see here ) and it seems you don't want that. Param 必须在路由定义中定义(请参阅此处),而且您似乎不想要那样。
You can pass the info as a query parameter, the link looks like this:您可以将信息作为查询参数传递,链接如下所示:
<router-link :to="{ path: '/about', query: { myprop: 'someValue' }}">
About
</router-link>
The resulting URL will end up looking like this:生成的 URL 最终将如下所示:
/about?myprop=somevalue
Then, this query parameter is available as this.$route.query.myprop
in any component.然后,这个查询参数在任何组件中都可以作为
this.$route.query.myprop
使用。 To pass it as an actual prop to the About
component specifically, you need to configure the router to do so :要将其作为实际道具具体传递给
About
组件,您需要配置路由器来执行此操作:
{
path: '/about',
component: About,
props(route) {
return { myprop: route.query.myprop }
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.