在 Ionic Vue Modal 中打开的 Vue 组件没有 $route 和 $router

Question

我正在使用 Vue Ionic 创建应用程序，并尝试通过 ionic 提供的模态控制器更改页面，如下面的代码。

const modal = await this.$ionic.modalController.create({
  component: NewPageComponent
})
modal.present()

然后NewPageComponent 在<ion-modal></ion-modal> 中打开没有问题。 但是当我尝试在 NewPageComponent 中确认 $route 和 $router 时，NewPageComponent 没有这些。

新页面组件

export default {
  created () {
    console.log(this.$route) // undefined
    console.log(this.$router) // undefined
  }
}

在<ion-modal></ion-modal> 中打开的Vue 组件似乎没有$route 和$router。 但其他人有这些没有问题。 例如，我可以在App.vue 中看到$route 和$router。

App.vue

<template>
  <ion-app>
    <v-app>
      <span>App</span>
    </v-app>
  <ion-app>
</template>

<script>
export default {
  created () {
    console.log(this.$route) // this.$route exists
    console.log(this.$router) // this.$router exists
  }
}
</script>

当然我已经在main.js注册了路由器

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Ionic from '@ionic/vue'
import './registerServiceWorker'
import './plugins/ionic.js'


Vue.use(Ionic)
Vue.config.productionTip = false

new Vue({
  router, // I have set router like this
  render: h => h(App)
}).$mount('#app')

有什么方法可以让在<ion-modal></ion-modal> 中打开的 Vue 组件像 NewPageComponent 一样有$route 和$router？

Answer 1

Ionic 内部使用另一个Vue 实例。当您创建新模式时，它被放置在此实例中，而没有在主应用程序中注册的路由器。我建议您使用事件总线模式在组件之间进行通信。很简单：

EventBus.js

import Vue from 'vue'
export const EventBus = new Vue()

然后在主应用中你可以监听自定义事件：

App.vue

import {EventBus} from './EventBus.js'
//...
created() {
  EventBus.$on('change-route', this.handleRouteChange)
  EventBus.$on('change-params', this.handleParamsChange)
},
beforeDestroy() {
  EventBus.$off('change-route', this.handleRouteChange)
  EventBus.$off('change-params', this.handleParamsChange)
},
methods: {
  handleRouteChange(page) {
    // here you can normally access this.$router
    this.$router.push(page)
  },
  handleParamsChange(params) {
    this.$router.push({params:params})
  }
},

NewPageComponent.vue

import {EventBus} from './EventBus.js'
//...
methods: {
  changePage() {
    EventBus.$emit('change-page', '/new-page')

    // If you want to change page named route with params:
    // EventBus.$emit('change-page', {name:'product', params: {id: 10}})
  },
  updateParams() {
    EventBus.$emit('change-params', {id: 1010})
  } 
}