ionic-framework - Vue-router 推送到命名视图

Question

我找不到转到命名视图的解决方案。我的路线，

routes: [
{
  path: '/',
  component: App,
  children : [
    {
      path: '/',
      redirect: 'home'
    },
    {
      path: 'home',
      components: {
        home : Home,
        contact : Contact,
        geo : Geo,
        shake : Shake,
        camera : Camera
      }
    },
  ]
}

]

这是我的 app.vue

...
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button @click="page()">
        <ion-icon name="camera"></ion-icon>
    </ion-fab-button>
</ion-fab>
...

export default {
    name : 'App',
    methods: {
        page() {
            this.$router.push('home');
        }
    }
}

单击相机图标/按钮时，我想转到相机组件。我怎样才能做到这一点？

标签： ionic-frameworkvue.jsvue-router

Answer 1

您必须为命名视图中的每个名称定义多个路由器视图。每个名称应该有一个默认值和多个其他值。像这样。

<router-view></router-view>
<router-view name="home"></router-view>
<router-view name="contact"></router-view>

router-view当一个 url 被点击时，所有相应的组件都将被加载。

您可以在此文档中阅读更多相关信息。在这里查看一个工作示例