How to create a sidebar on the left and on the right is a page that is called from the list in the sidebar

Question

I want to create a sidebar that can call another page and stay on that page

I have tried it but the result is that the page I want to display is redirected to another page and I have also tried a different method but the page I want to call is actually under the sidebar

Answer 1

One common approach is to create a default layout component, often named default.vue, which acts as a wrapper for your views or components.

Here's a step-by-step guide:

Create a Default Layout Component:

If it doesn't exist already, create a default.vue component. This will serve as the base layout for your application.

<!-- default.vue -->
<template>
  <div>
    <Sidebar /> <!-- Include your sidebar component -->
    <router-view /> <!-- This is where your views/components will be `enter code here`rendered -->`enter code here`
  </div>
</template>


 
    <script>
import Sidebar from '@/components/Sidebar.vue';

 // Adjust the path based on your project structure
    
    export default {
      components: {
        Sidebar,
      },
    };
    </script>

<style>
/* Add any global styles or layout-specific styles here */
</style>

Create a Sidebar Component:

If you haven't already, create a Sidebar.vue component to handle navigation.

<!-- Sidebar.vue -->
<template>
  <aside>
    <!-- Add your navigation links or components here -->
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <!-- Add more links as needed -->
  </aside>
</template>

<script>
export default {
  // Add any component-specific logic here
};
</script>

<style scoped>
/* Add styles specific to the Sidebar component */
</style>