Exploring navigation options in VueJS with the router

I recently completed a tutorial on integrating Okta OAuth with VueJS. In my application, I have set up a default page that displays the "App.vue" component and switches to the "About.vue" component upon clicking the "/about" route. However, I encountered an issue where when I navigate to the "about" link, the content of the App.vue component is still visible below the About.vue component. I am puzzled as to why this is happening despite configuring the routes accordingly.

Here is a snippet from my main.js file:

 ...

The App.vue component structure is as follows:

...

The About.vue component structure is as follows:

...
javascriptvue.jsvue-router

Answer №1

The <app-cat-log-home> component is currently situated in the main view section of your App.vue file, where the root <router-view> resides. This means that the component will be displayed in all views.

To address this issue, you can create a separate "Home" view and relocate the <app-cat-log-home> component there:

<!-- Home.vue -->
<template>
  <div>
    <app-cat-log-home msg="posts"/>   
  </div>
</template>

<!-- App.vue -->
<template>
  <div id="app">
    <router-link to="/" tag="button" id='home-button'> Home </router-link>
    <router-link to="/about">About</router-link>
    <button v-if='authenticated' v-on:click='logout' id='logout-button'> Logout </button>
    <button v-else v-on:click='login' id='login-button'> Login </button>

    <router-view/>

    <!-- Moved into Home.vue -->
    <!-- <app-cat-log-home msg="posts"/> -->
  </div>
</template>

Next, configure the default route for Home:

// main.js
import Home from '@/views/Home.vue'

const router = new Vuex.Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    //...
  ]
})

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

How can you disable listeners and minimize performance impact in concealed React components?

In order to meet our requirements, we need to display the same react component in various positions on our grid and toggle their visibility based on screen width. For example, our product module component will be displayed at position 3 on mobile devices a ...

javascriptreactjs

Learn the steps for converting data from xlsx or csv files into JSON format

I am currently working on developing an application that allows users to upload xlsx or csv files from the frontend and submit them to a backend built with nodejs and express for processing. However, when I receive the data in the backend, it appears in th ...

javascriptnode.jsexpressbuffersheetjs

Tips for creating boxes with clearly defined edges on shared sides using three.js

When I draw boxes with common sides, I don't see the common edges, but rather perceive them as a single object even though there are 25 boxes: https://i.sstatic.net/gE8FW.png function box(scene, x, y, z, size) { const points = []; ...

javascripthtmlthree.js

Prevent the event from spreading down to the child elements

I believed I had a solid understanding of the concept of event bubbling, but now I am starting to doubt my grasp on it. I designed a semi-modal dialog like so: <div class="context-menu"> <div class="menu"> … </div> < ...

javascripthtmldom-eventsevent-bubbling

Access the HTML file from a different directory

I have a directory called "myWebsite". Within this directory, there is a file named "index.html" and another subdirectory named "other". Inside the "other" directory, there are CSS files, JS files, and "page2.ht ...

javascripthtml

What is the best way to display an Error 404 page in a statically rendered client-side page using Next.js?

import { onAuthStateChanged } from "firebase/auth"; import Link from "next/link"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import { auth } from "../../lib/firebase&qu ...

javascriptreactjsnext.jshttp-status-code-404

Exploring the power of DOM manipulation in both jQuery UI and AngularJS UI Router

I have a query regarding the integration of jQuery UI and AngularJS UI Router. My aim is to incorporate jQuery UI themes into my application, however, when using AngularJS UI Router, I face issues with an incomplete DOM tree. Is there a way to successfull ...

javascriptjqueryjquery-uiangularjs

Tips for verifying the "truthiness" of an object, removing any falsy values, and making changes to the object

I am faced with the task of examining each property of an object to determine if it is truthy, and then removing any that are not. var user = { name: 'my name', email: null, pwHash: 'U+Ldlngx2BYQk', birthday: undefined, username: &ap ...

javascriptobjecttruthiness

Failure of AJAX to transmit variable to PHP script

I am relatively new to PHP and currently working on the dashboard page of a website where an administrator can view all existing admins. Each admin's row has a button that is supposed to check their privileges, such as access to article editing and cl ...

javascriptphpajax

Checking the Signature with Elrond in the Backend using PHP

My latest decentralized application allows users to log in using their Elrond wallet and generate a unique signature containing their wallet address and additional data. As part of the authorization process, the signature is included in the payload of req ...

javascriptphpmultiversx

Display nested array objects of varying levels within VUE

How do I display nested elements on the UI when dynamically generated based on a parent element's selected option (e.g. List)? For example, in the code below, when creating a field and selecting the List option, another nested should appear, and so o ...

javascriptvue.jsuser-interface

Invoke the session on a different page and incorporate it into your JavaScript code

My php files, ajax.php and index.php, contain a mix of php code, html, and javascript. I am developing a quiz website where questions are retrieved from a database using sql in ajax.php and displayed on index.php through an ajax method. The user's sco ...

javascriptphpjqueryhtmlajax

Unleashing the hidden power of a website's jQuery function - the ultimate guide!

I am looking to modify the delayedAutoNext function found on the homepage of pitchfork.com which rotates the pitchfork.tv images. My goal is to adjust the setTimeout value to a new number. Is there a way to accomplish this using a bookmarklet or userscrip ...

javascriptjquerybookmarkletuserscripts

Integrating Braintree with Angular for accepting Android Pay transactions

Currently facing a challenge with Braintree that I need help resolving. I have successfully set up Braintree to generate my client_token using my API, and created the drop-in feature as a test. Here is how I implemented it: (function () { 'use st ...

javascriptandroidangularjsbraintree

Modifying the Color of Individual Items within the Pagination Component in MUI

I am attempting to modify the background color of every item in my Pagination component by utilizing makeStyles. import { Pagination } from "@material-ui/lab"; import { makeStyles } from "@material-ui/core"; const pagination = makeStyl ...

javascriptcssreactjsmaterial-ui

Converting JSON data from a PHP variable into a jQuery array: What you need to know

I attempted to retrieve addresses using the postcode and applied the getaddress.io site API with PHP. This resulted in a JSON dataset stored in the PHP variable $file. Now, I am tasked with converting this JSON result into a jQuery array. { "Latitude":-0. ...

javascriptphpjqueryajaxjson

Is it possible to export data to an Excel file from a Vuetify data table?

I'm attempting to extract simulated data directly from a datatable without using an API. However, I haven't been able to find any examples demonstrating how to do this. ...

vue.jsdatatableexport-to-csvexport-to-excel

Leveraging Ajax for establishing session and displaying outputs

Trying my best to make this work with AJAX, but it's a new concept for me. So bear with me as I figure this out... I've posted a couple of questions about resolving the issue at hand and we've made progress. However, a new challenge has pre ...

javascriptphpjqueryhtmlajax

Use Javascript to set cookies and remember the show state when clicked

Can you offer some advice? I am looking to add cookies to my simple JavaScript code. Currently, the div is displayed when clicking on a link, but it hides again when the page reloads. I would like to implement cookies to remember the show state for 7 days. ...

javascriptjqueryhtmlcsscookies

utilizing mongoose populate for displaying the author

One of the features on my website allows users to add notices, and I want the page to display the author of each notice. const notices = await Notice.findById(id).populate('author'); When I access this route, I can successfully log the authors o ...

javascriptnode.jsexpressmongooseejs