如何使用vue直接打开另一个页面其中一个frame

发布网友 发布时间：2022-04-19 10:17

我来回答

共1个回答

热心网友 时间：2022-04-22 19:28

App.vue
...
<router-view/> // 里面主要内容就是一个路由视图
...

MenuItems.vue: 侧边菜单栏
<template>
<div>
<!-- 侧边栏 -->
<md-sidenav ... ref="main-sidebar">
...
</md-sidenav>
<!-- 点击 MenuItems 中的其中一个菜单，对应的内容显示区 -->
<router-view/>
</div>
</template>
<script>
export default {
methods: {
<!-- 想要在其他Vue中执行的方法 -->
toggleSidenavInMenuItems() {
this.$refs['main-sidebar'].toggle();
}
}
}
</script>

ContentPage.vue: 右侧内容容器(包括 toolbar 和 content)
<template>
<div>
<!-- Toolbar -->
<md-whiteframe md-tag="md-toolbar">
<md-button @click="toggleSidenavInContentPage()">Toggle按钮</md-button>
</md-whiteframe>
<!-- Content -->
<slot/>
</div>
</template>
<script>
export default {
methods: {
toggleSidenavInContentPage() {
// TODO: 这里该怎么写,去执行在 MenuItems 中的 toggle..方法？？？
}
}
}
</script>

IntroctionPage.vue: 使用ContentPage模板的例子
<template>
<content-page>
...
</content-page>
</template>