Vuejs - 如何将params从子路由传递到父路由？
问题描述：
我是vuejs的初学者。Vuejs - 如何将params从子路由传递到父路由？
我对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有任何变化（/仪表板/概述），只是接收来自子路由的数据参数。
答
您可能需要考虑使用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>