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>

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

Vuejs - How to pass params from child route to parent route?

vue.js

vue-router

vuejs2