Vuejs - 如何将params从子路由传递到父路由？

Question

我是vuejs的初学者。

我对vue路由器嵌套路由的一些练习有问题。

为了以防万一，这是一个嵌套的路由配置。

const router = new Router({ 
    routes: [ 
     { 
      path: '/dashboard', 
      name: 'dashboard', 
      component: Dashboard, 
      meta: { 
       requiresAuth: true 
      }, 
      children: [ 
       { 
        path: 'overview', 
        name: 'Overview', 
        component: Overview, 
        meta: { 
         requiresAuth: true 
        } 
       } 
      ] 
     } 
    ] 
}) 

如果我想从一个孩子的路线（概述）于母公司路线（仪表盘）

我应该如何处理呢传递数据？

我不希望URL有任何变化（/仪表板/概述），只是接收来自子路由的数据参数。

Answer 1

您可能需要考虑使用Vuex作为跨不同组件共享状态的手段（或者，如果您是初学者，也许不需要）。

或者你可以在子组件发出的事件：

Vue.use(VueRouter); 
 

 
var Parent = { 
 
    template: '<router-view @data="onData"></router-view>', 
 
    methods: { 
 
    onData(data) { 
 
     alert('Got data from child: ' + data); 
 
    }, 
 
    }, 
 
}; 
 

 
var Child = { 
 
    template: '<div><input v-model="text"><button @click="onClick">Click Me</button></div>', 
 
    data() { 
 
    return { 
 
     text: 'Hello', 
 
    }; 
 
    }, 
 
    methods: { 
 
    onClick() { 
 
     this.$emit('data', this.text); 
 
    }, 
 
    }, 
 
}; 
 

 
var router = new VueRouter({ 
 
    routes: [ 
 
    { 
 
     path: '', 
 
     component: Parent, 
 
     children: [ 
 
     { 
 
      path: '', 
 
      component: Child, 
 
     }, 
 
     ], 
 
    }, 
 
    ], 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    router, 
 
});

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script> 
 
<script src="https://rawgit.com/vuejs/vue-router/dev/dist/vue-router.js"></script> 
 

 
<div id="app"> 
 
    <router-view></router-view> 
 
</div>