Vue-router 推送到命名视图答案

【问题标题】：Vue-router push to Named ViewVue-router 推送到命名视图
【发布时间】：2019-03-19 13:08:27
【问题描述】：

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

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

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

【问题讨论】：

你是如何定义你的<router-view></router-view>的？

标签： ionic-framework vue.js vue-router

【解决方案1】：

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

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

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

您可以在this doc 中了解更多信息。看一个工作示例here

【讨论】：

谢谢你的帮助，我忘记了

【解决方案2】：

如果你想使用脚本重定向，你可以试试这个来改变路由。

this.$router.push({ name: 'your_route_name' })

此外，您还可以通过在定义路由时启用props: true 将参数发送到该路由，

this.$router.push({name: 'your_route_name', params: { var_name: data } })

【讨论】：