前台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)
}

"""

原文地址：https://www.cnblogs.com/qianzhengkai/p/11228964.html