I am currently dealing with a split layout, as shown in the example screens below. The default setup has the fixed app Vue content occupying 40% of the left interface, while the router view takes up the remaining 60% on the right side.
However, I have encountered an issue where one of the components (specifically, router link 3) needs to be displayed in fullscreen mode. Unfortunately, I am facing difficulty in making the router component overlap the app Vue content as it always appears beneath it.
Router link 1: https://i.sstatic.net/VCtUv.png
Router link 2: https://i.sstatic.net/akbhZ.png
Router link 3: https://i.sstatic.net/eZij6.png
Below is my current code structure:
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>
Component 1 and 2:
<template>
<div class="container">
// same content
</div>
</template>
<style>
.container {
display: inline-block;
margin-left: 40%;
width: 60%;
height: 100vh;
}
</style>
Component 3:
<template>
<div class="container">
// same content
</div>
</template>
<style>
.container {
display: inline-block;
width: 100%;
height: 100vh;
}
</style>