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>