Question

我是vuejs的初学者。

关于vue-router嵌套路由的一些做法我遇到了问题。

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

{
   "cluster_name": "KMT",
   "status": "yellow",
   "timed_out": false,
   "number_of_nodes": 1,
   "number_of_data_nodes": 1,
   "active_primary_shards": 452,
   "active_shards": 452,
   "relocating_shards": 0,
   "initializing_shards": 0,
   "unassigned_shards": 451,
   "delayed_unassigned_shards": 0,
   "number_of_pending_tasks": 0,
   "number_of_in_flight_fetch": 0,
   "task_max_waiting_in_queue_millis": 0,
   "active_shards_percent_as_number": 50.055370985603545
}

如果我想将数据从子路由（概述）传递到父路由（仪表板）

我该如何处理？

我不希望网址有任何更改（/仪表板/概述），只是从子路径接收数据参数。

Answer 1

您可能需要考虑使用Vuex作为跨不同组件共享状态的方法（如果您是初学者，可能不会这样做。）

或者，您可以在子组件中发出一个事件：

＆＃13;

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,
});

＆＃13;

<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>

＆＃13;

Vuejs - 如何将儿童路线中的参数传递给父路线？

1 个答案: