Vue中子路由怎么调用父路由中的方法和参数

一、实现方式：

1. 直接在子路由的范围内使用this.$parent.xx即可调用对应父亲路由的参数。
2. 使用this.$parent.xx()即可调用对应父亲路由的方法

二、测试代码：

  父页面：

<template>
  <div class="parent-demo">
    <div>这是父页面</div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data () {
    return {
      parentParam: '父页面数据'
    }
  },
  methods: {
    // 初始化
    init (msg) {
      alert('这是父页面，传入的参数是："' + msg + '"')
    }
  }
}
</script>

  子页面：

<template>
  <div class="children-demo">
    <div>这是子页面</div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  mounted () {
    this.init()
  },
  methods: {
    // 初始化
    init () {
      this.$parent.init('在子页面中调用父页面的数据和方法，' + this.$parent.parentParam);
    }
  }
}
</script>

三、测试结果：