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

当我单击相机图标/按钮时，我想转到“相机”组件。我该如何实现？

Answer 1

您必须为命名视图中的每个名称定义多个路由器视图。默认值应为一个，每个名称应为多个。这样。

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

点击网址后，所有相应组件都将全部加载到router-view中。

您可以在this文档中详细了解它。请参阅有效的示例here

Answer 2

如果您想使用脚本进行重定向，则可以尝试更改路由。

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

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

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

Vue路由器推送到命名视图

2 个答案: