將組件定位在固定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類將類應用於已在頁面上顯示的組件。 這將與您在所見即所得編輯器的全頁選項中看到的結果相似。