将位置组件固定在固定app.vue

Question

我有一个分开的布局，如下面的示例屏幕所示。默认情况下，固定应用vue内容占接口的40％，而路由器视图占右侧的60％。

现在是问题：在此示例中，路由器链接3的组件之一应为全屏显示。我不知道路由器组件如何与App Vue重叠。它总是在它下面。

路由器链接1：

路由器链接2：

路由器链接3：

这是我当前的代码

app.vue：

<template>
<div class="left">
  <router-link to="/link1">
  <router-link to="/link2">
  <router-link to="/link3">
</div>

// some content

<router-view></router-view>
</template>

<style>
.left {
  width: 40%;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

组件1和2：

<template>
  <div class="container">
  // same content
  </div>
</template>
<style>
.container {
  display: inline-block;
  margin-left: 40%;
  width: 60%;
  height: 100vh;
}
</style>

组件3：

<template>
  <div class="container">
  // same content
  </div>
</template>
<style>
.container {
  display: inline-block;
  width: 100%;
  height: 100vh;
}
</style>

Answer 1

您可以在component3的样式上使用“ position：absolute”。您还可以为其赋予较高的z索引，使其显示在顶部。例如：

<template>
  <div class="container">
  // same content
  </div>
</template>
<style>
.container {
  display: inline-block;
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100vh;
}
</style>

Answer 2

您还应该能够使用v-bind类将类应用于已在页面上显示的组件。这样的结果将与您在所见即所得编辑器的全页选项中看到的结果类似。