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

"""

 

posted @ 2019-09-23 10:03  读自己  阅读(583)  评论(0编辑  收藏  举报