Concealing the parent template in Vue Router when the child is displayed

Having some trouble setting up Vue.js with the router, specifically dealing with view display issues. I've created a router.js file with child routes for breadcrumbs and route clarity purposes.

Each individual route loads perfectly fine when opened. For example, when I navigate to /apps, I see the expected view from my Apps.vue component showcasing the message App overview. However, the problem arises when I proceed to /apps/app-one, both the Apps.vue and AppOne.vue templates are displayed. Is there a way to prevent this?

The structure of the Vue components is as follows:

Router.js

import Router from 'vue-router';
import AppsPage from './components/Apps.vue'
import AppOne from './components/AppOne.vue'
import AppTwo from './components/AppTwo.vue'

export default new Router({
    // mode: 'history',
    routes: [
        {
            path: '/apps',
            component: AppsPage,
            children: [
                {
                    path: '/apps/app-one',
                    component: AppOne,
                },
                {
                    path: '/apps/app-two',
                    component: AppTwo,
                },
            ]
        },
    ]
});

Apps.vue

<template>
    <div id="app-overview">
        <h1>App overview</h1>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: 'app_page'
    }
</script>

App1.vue

<template>
    <div>
        <h1>App 1</h1>
    </div>

</template>

<script>
export default {
    name: 'app_one'
}
</script>

App2.vue

<template>
    <div>
        <h1>App 2</h1>
    </div>

</template>

<script>
export default {
    name: 'app_two'
}
</script>

Answer №1

When organizing your routes in a parent-child relationship, the child component will be displayed within the parent component (at the <router-view>). This behavior is to be expected.

If you wish to hide the parent component when the child route is active, then the routes should be set up as siblings rather than nested:

[
    {
        path: '/apps',
        component: AppsPage,
    },
    {
        path: '/apps/app-one',
        component: AppOne,
    },
    {
        path: '/apps/app-two',
        component: AppTwo,
    },
]

The arrangement of the routes mirrors how they appear on the page.

Answer №2

If you're looking to achieve this, it's not only possible but also quite simple! Just follow these steps:

<template>

    <div>

        <div v-show="isExactActive">
            The contents of the parent component will be displayed here
        </div>

        <router-view ref="rv"></router-view>

    </div>

</template>


<script>

    export default {

        data() {
            return {
                isExactActive: true,
            }
        },

        updated() {
            this.isExactActive = typeof this.$refs.rv === 'undefined';
        },

        mounted() {
            this.isExactActive = typeof this.$refs.rv === 'undefined';
        }

    }
</script>

I hope this information proves useful to you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing unique layouts for specific views in sails.js and angular.js

I am currently working on a Sails.js + Angular.js project with a single layout. However, I have come across different HTML files that have a completely different layout compared to the one I am using. The layout file I am currently using is the default la ...

How to dynamically populate a Vue multiple select dropdown with v-for loop?

I have been attempting to implement multi-select questions in Vue using v-for. The Select menu and its options are populated via JSON data. Unfortunately, I am facing difficulty in retrieving the selected results as expected. Whenever I select an option ...

Incorporating JSON Objects within AngularJS

Currently, I am using AngularJS to fetch JSON data like this: $http.get('/balance').then(function (response) { $scope.balance = response.data; }); The value of response.data is as follows: { "pending": [{ "amount": 16, "currency": ...

Highchart encountering issues with multiple Y axes

My highchart is causing Chrome to crash when I add the second series. I am unable to see the Chrome console for debugging purposes.. :( Does anyone have any suggestions? $(function () { var chart; $(document).ready(function() { chart ...

Performing a sequence of actions using Jquery Queue() function and iterating through each

I am facing an interesting challenge with an array called result[i]. My goal is to iterate through each field in the array and add it to a specific element on my webpage. $("tr:first").after(result[i]); However, I would like this process to happen with a ...

Changes to a key value are not reflected in the array of objects

When making changes to input fields within an array of records that include Date and Text fields in a table, the data is not updating as expected. I am encountering issues where changing the Date input results in undefined Text values, and vice versa. My g ...

Node.js has the ability to establish internal connections, however it cannot establish connections

I'm having an issue connecting to a JavaScript file on my local server. I'd like to input the external IP address and port in order for it to run externally. This functionality currently works when accessed locally. Below is the code from my serv ...

What is the best way to store multiple values in local storage using useState in react?

Currently, I am exploring how to utilize multiple values in the useState hook and perform CRUD operations in local storage. Here is an example of my code: const [Data,setData]=[[{ name:'luis', pass:'1234', //....... }]] // ...... ...

Having trouble updating attribute through ajax requests

How can I set attribute values using ajax-jquery? Here are some snippets of code: HTML_CODE ========================================================================== <div class="col"> <ul class="nav nav-pills justify-content-end& ...

What effect does setting AutoPostBack to "true" in an ASP dropdownlist have on the fireEvent() function?

I am currently working on an aspx page. This page includes three dropdown lists and a button, all of which are populated dynamically based on the code written in the code-behind file (.cs file). To achieve this, I need to utilize two event handler methods ...

Issue with pop up window causing button click event to malfunction

I am facing an issue where the button click event works fine outside of a pop-up window but does not fire when inside the pop-up window. In my HTML code, the part that calls the button event outside of the pop-up window works perfectly, but inside the pop- ...

What is the best way to display an image path and add it to the Ajax success function in a CodeIgniter application?

I am struggling to display my image path correctly using append and a variable to store the value. However, whenever I try, it results in an error. Let me provide you with the code snippet: <script type="text/javascript"> $(document).ready(funct ...

Currently working on integrating a countdown timer using the Document Object Model (DOM)

Is it possible to create a timer in the DOM without using any JavaScript? I currently have a JavaScript code for the timer, but I want to convert it to work directly with the DOM without needing to enable JS. Any assistance would be greatly appreciated! ...

Unleashing the power of JavaScript: Sharing arrays and data structures effortlessly

Currently, I am utilizing HTML & JavaScript on the client side and NodeJs for the server side of my project. Incorporated in my form are multiple radio buttons. When the user clicks on the submit button, my intention is to post the results to the server. ...

Is it just me or does my node server come preconfigured with CORS enabled? What am I overlooking here?

I have a simple node and express server set up here. Surprisingly, even without any middleware, I am able to successfully log the response from an axios request made to google.com. Doesn't this usually trigger a cors error, requiring some form of midd ...

Encountering issues with rendering in React JS when utilizing state variables

I've been attempting to display content using the render method in React JS, but for some reason, the onClick code isn't executing. I'm currently enrolled in a course on Udemy that covers this topic. import React, { Component } from 'r ...

Booting up a module in AngularJS without using automatic bootstrapping

Here is the structure of my HTML... <body id="main"> {{pageName}} </body> This is how I implement it in JavaScript: angular.module('myApp',[]) .controller('myController', function($scope){ console.log('initial ...

Encountered a CSS error while trying to compile the project with npm build

When attempting to build the project, I encountered a postcss error. After some debugging, I discovered that the imports below were causing the issue: @import "@material/button/dist/mdc.button.min.css"; /*material text box css*/ @import "@material/float ...

Running Javascript code using Puppeteer, in conjunction with Node.js and Express framework

Presented here is the code snippet that opens a browser to extract specific items using JavaScript. var express = require('express'); var fs = require('fs'); var request = require('request'); var cheerio = require(' ...

The text sliding feature gradually moves further away from the left side with each iteration

I am in the process of transferring an existing slider from one website to another. Instead of creating a text slider from scratch, I decided to modify the code I found for the new site. However, the slider is not functioning correctly on the new site. Th ...