Vuejs -如何从子路由传递参数到父路由？

Question

我是vuejs的初学者。

我对vue-router嵌套路由的一些实践有一个问题。

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

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有任何更改(/dashboard/overview)，只需要从子路由接收数据参数。

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>

​