前台VUE的组件之间传参方式
Posted qianzhengkai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前台VUE的组件之间传参方式相关的知识，希望对你有一定的参考价值。
路由传参
"""
转跳：
<router-link :to="'/course/'+course.id">course.name</router-link>
路由：
path: '/course/:course_id',
name: 'detail',
component: Detail
获取：
this.$route.params.course_id
""""""
转跳：
<router-link :to="name: 'detail', params: id: course.id">course.name</router-link>
路由：
path: '/detail',
name: 'detail',
component: Detail
获取：
this.$route.params.id
""""""
转跳：
<router-link @click="routeAction(course.id)">course.name</router-link>
routeAction(course_id)
this.$router.push(
name: 'detail',
params:
id: course_id
)
路由：
path: '/detail',
name: 'detail',
component: Detail
获取：
this.$route.params.id
"""仓库传参
"""
仓库：
export default new Vuex.Store(
state:
course_id: 0
,
mutations:
set_course_id (state, value)
state.course_id = value
,
actions:
)
传递：
routeAction(course_id)
this.$router.push('detail')
this.$store.commit('set_course_id', course_id);
路由：
path: '/detail',
name: 'detail',
component: Detail
获取：
create()
window.console.log(this.$store.state.course_id)
"""以上是关于前台VUE的组件之间传参方式的主要内容，如果未能解决你的问题，请参考以下文章