"Swapping out a parent view with a child route component in Vue: Step-by-step

I have created Vue routes with a parent route for 'dashboard' and a child route for 'report', set up like this:

{
    path: '/dashboard', component: dashboard,
    children: [
        {
            path:'report', component: report
        }
    ]
},

In the parent component, I have card menus to navigate to the child component along with a router-view:

<template>
    <div class="container mt-5">
        <div class="row mt-0 h-100">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 my-auto" id="report-card">
                <router-link to="/dashboard/report" class="card2">
                    <div class="d-flex flex-column justify-content-center">
                        <div class="card-icon p-3">
                            <img :src="icons[0]"/>
                        </div>
                        <h3>Make a Report</h3>
                        <p class="small">Make a report of a crime or suspicious activities</p>
                    </div>
                </router-link>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

Clicking on the router link currently renders the child component within the parent view. I'm looking for a solution where the child route replaces the parent entirely, rather than rendering within it. Is there a way to achieve this?

javascriptvue.jsvue-componentvue-router

Answer №1

One approach is to use v-if along with this.$route.name to verify the router name and display the desired content based on the router.

For instance, consider the following router configuration:

{
    path: '/dashboard', 
    name: "Dashboard",
    component: dashboard,
    children: [
        {
            path:'report',
            name: "Report",  
            component: report
        }
    ]
},

You can determine the parent route by using the following code:

<template>
<div>
 <div v-if="this.$route.name === 'Dashboard' ">
    <!-- display your homepage component here -->
  </div>
  <router-view></router-view>
</div>
</template>

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

"Could you please provide me with further details on how to use sequelize

I recently started working with node js and I used sequelize-auto to generate the models. However, I encountered an error when following the guidance provided in this link https://github.com/sequelize/sequelize-auto. If you need further clarification on th ...

javascriptmysqlnode.jsexpresssequelize.js

Adjusting the overflow of a parent div based on the position of the div within it by scrolling

I'm trying to create a page with 3 different sections: <div class="container" id="main-container"> <div class="section" id="profile"> Hello World </div> <div class="section" id="projects"> Hello World 2 ...

javascriptjqueryhtmlcss

Transform 'ast' back into a template string within Vue

I am currently using vue-template-compiler to modify attributes within a specific div. Once I have made the necessary changes, I need to convert the ast's back to template string format. How can this be accomplished? Is there a tool similar to dom-se ...

vue.jsabstract-syntax-tree

Applying custom styles to the initial 5 elements post clicking the button with Jquery

I have a set of HTML codes containing multiple buttons. <div class="main"> <div class="button hide">1</div> <div class="button hide">2</div> <div class="button hide">3</div> <div class="button h ...

javascriptjqueryhtml

"Encountering problems with location search function on Instagram API for retrieving posts

I've been working on integrating two APIs – Instagram and Google Maps. While I've managed to get everything functioning smoothly, there's an issue with displaying "up to 20 pictures" around a specific location. I'm unsure why this in ...

javascriptajaxapigoogle-mapsinstagram

Guidelines for passing a value to a method within a method using JavaScript

I am currently exploring how jQuery can be used to select an element, retrieve an attribute, and assign it a new value. While I have successfully managed to select the element and extract the attribute, I am facing difficulty in setting the attribute using ...

javascriptjquery

What is the best way to make multiple HTML tables sortable?

I recently implemented an open-source JavaScript table sorter in my project. You can find more information about it here: However, I encountered an issue where only the most recently added table on my page is sortable. When users press a button, new table ...

javascriptjqueryhtmlajax

Code snippet for converting the current webpage into a PDF using Jquery

Looking for guidance on how to convert the current webpage into a PDF using client-side (JQuery) code. The PDF should include all content from the webpage along with a few images if possible. The main requirement is to have all webpage content in the PDF, ...

javascriptjqueryasp.net-mvc-5

What could be the reason for the Javascript function failing to run?

I need assistance in executing a function called "send()" which includes an AJAX request. This function is located in ajax.js (included in the code snippet) The Ajax success updates the src attribute of my image. The function seems to be working correctly ...

javascriptjqueryhtmlnode.jsajax

Deactivate fields B and C unless input A is provided

http://jsfiddle.net/6Pu3E/ JavaScript Code: $(document).ready(function() { var block = false; if ($('#password').attr('disabled')) { block = false; } else { block = true; } if (block) { $(&a ...

javascriptjquery

Ways to modify client socket from JavaScript to PHP

Looking for a way to convert a client socket from JavaScript to PHP in order to receive data from the server socket? Check out the PHP socket Bloatless library here. This is an example of the Client Javascript code: <script> // connect to chat appl ...

javascriptphpwebsocket

The characteristics and functions of the THREE.TransformControls

I've been attempting to utilize transformControl in my program, but due to the lack of documentation on controls at threejs.org, I find it challenging to tap into its full potential. I'm seeking information on all the properties and methods provi ...

javascriptthree.js

Adjust the hue of a specific node

Is there a way to customize the color of an individual node in an eChart treemap? I attempted to set a color property for the node, but it didn't seem to work. While I was able to change the label's color, I'm interested in changing the back ...

javascripttreemapecharts

Retrieve Data from Form Using PHP and Ajax

I currently have a form on my HTML page that looks like this: <form id="submission" action="testresponse.php" method="post"> <input id="URL" name="URL" type="text"> <button name="Submit" type="submit">Subm ...

javascriptphpjqueryajaxforms

Navigating with jQuery Scrollbars

Looking to incorporate a bit of animation in jQuery, trying out the following line: window.parent.scroll(coord[0], coord[1]); The next block of code doesn't seem to be achieving what I had in mind. Do you have any suggestions? $(window.parent).anim ...

javascriptjqueryscroll

What is the best way to ensure my dropdown menu closes whenever a user clicks anywhere on the page? (javascript)

I have created a dropdown that appears when the user clicks on the input field, but I would like to remove the active class so that the dropdown disappears if the user clicks anywhere else on the page. Here is my code snippet: // drop-down menu functi ...

javascripthtmldrop-down-menulogic

Reload the Node.js webpage

Is there a method to automatically refresh a Node.js page following a socket.io event? var messageDynamic = "Initial status"; app.get("/", function(request, response) { response.setHeader('Content-Type', 'text/plain'); respons ...

javascriptnode.js

Is there a way to automatically scroll vertically to a specific line in HTML?

Trying to explain this is a bit tricky. I am looking to add an element to the HTML that prompts the browser to scroll vertically to its location automatically when loaded, similar to an anchor. So: | visible area | | content html | | content html | ...

javascriptjqueryhtmlcss

Refresh collection of texts

I am attempting to update an item within a subarray of a document. The type of the subarray is an array of strings: Dictionary.findOne({ name: req.query.name }, function(err1, data){ if(err1){ logger.error(err1); res.send({ ...

javascriptnode.jsmongodbmongoose

What are the methods for choosing various boxes using the UP/DOWN/RIGHT/LEFT arrow keys?

This code snippet displays a 3x3 matrix where boxes can be hovered over and selected. The goal is to navigate around with keys and select boxes using ENTER. Can anyone provide guidance on how to achieve this functionality? <link rel="stylesheet" href ...

javascripthtmlbootstrap-5