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

When updating a form, it is essential to display select box data from the database effortlessly. It is also important to ensure that the select box data's id is

In my current project, a quasar (vuejs) app, I am faced with an issue related to an update form functionality. The challenge I am encountering is that when I submit the form without making any changes to the select box, it submits the label as a string ins ...

vue.jsquasar-frameworkquasar

Remove identical options from the dropdown menu

After hard-coding and adding items to the dropdown list for team size, such as 1, 2, 3, I am encountering an issue when loading it for editing or updating. Duplicate values are appearing in the list: 1 1 2 3 4... How can I remove these duplicate value ...

phpjavascriptjqueryhtml

Parsing improperly formatted JSON from an HTTP GET request can be done using either AngularJS or JQuery

Trying to decipher a poorly formatted JSON response from a remote server that looks something like this: //[ {},{} ] In my AngularJS code: $http.get('http://www.example.com/badjson') .success(function(data) { console.log(data); }) ...

javascriptjqueryajaxjsonangularjs

Class for Eliminating the Background Image Using Bootstrap

Is there a Bootstrap class that can be used to remove a background image from a div? Currently, I have this style defined in my CSS: background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0)); I would like to remove it using: bg-img-non ...

javascripthtmlcsstypescriptbootstrap-4

Angular2: Issue encountered while processing click event

When I click a button on my client application, it sends a request to the server I created using Express. The request handler in the server simply logs 'Delete from server' every time the button is clicked. I am encountering these errors when cl ...

javascriptangularjsangularangular2-routingangular2-directives

AngularJS 1.7.x's ngRoute tabs navigation post authentication

In my current project, I am using ngRoute to route users to the login page and upon successful login, they should land on the dashboard page. However, I am facing a problem with the dashboard page where I need to have two or more tabs that render HTML pag ...

javascriptangularjs

Exposure to vulnerabilities in react-scripts

While working on my ReactJS app, I encountered a challenge related to vulnerability and security issues. The use of react-scripts library has highlighted numerous vulnerabilities in the latest version. Is it possible for me to directly update the depende ...

javascriptreactjsnode.jsreact-scripts

Save the currently active index of the mySwiper element even after the page is

After clicking through the carousel, I want to be able to store the current index and slide back to it after a page refresh. Is there a way to save this value in a variable so that I can use the mySwiper.slideTo() method to return to the last index? In si ...

javascriptswiper.js

What is the best way to implement Media Queries in the Next.js application Router?

I am currently working with Next.js 13 and the App Router. Within my client component, I have implemented media queries in JavaScript to customize sidebar display for small and large screens. "use client"; export default function Feed() { co ...

javascriptreactjsnext.jsserver-side-renderingapp-router

The v-tabs component in Vuetify seems to be unable to fill 100% of the available

When using the v-tabs component, I noticed that it doesn't take up 100% of the height. Upon further inspection, I found that all the tab items (tab contents) are wrapped inside a <div class='v-tab__items'> your content </div ...

vue.jsvuejs2vuetify.js

"Typescript: Unraveling the Depths of Nested

Having trouble looping through nested arrays in a function that returns a statement. selectInputFilter(enteredText, filter) { if (this.searchType === 3) { return (enteredText['actors'][0]['surname'].toLocaleLowerCase().ind ...

javascriptarraystypescriptnested-loops

Troubleshooting a problem with data retrieval in Hygraph and Next JS

I'm currently facing an issue while attempting to fetch data from Hygraph in a fresh Next JS application. The error message I'm encountering is: Error: Cannot read properties of undefined (reading 'map'). As a beginner in both technolo ...

javascriptreactjsnext.jsgraphqlhygraph

What is the process for enabling multiple consumers to subscribe to a shared topic in RabbitMQ and receive identical messages?

Although there is a similar question with an answer here, I remain uncertain whether the limitation lies in RabbitMQ's capabilities or if I simply need to conduct further research. Coming from a JS/Node background where the event pub/sub pattern func ...

javascriptnode.jsrabbitmq

What is the method for transferring form data to a different page?

Currently utilizing AngularJS version 1.5.6 and looking for guidance on properly passing form data using $location.path. Below is my code snippet for Page A: <form> ... <button type="submit" ng-click="submit(formData)"> ...

javascriptangularjs

Customizing Geonames JSON Ajax Request

Having found the code I needed from a sample website, I am now seeking help to customize it to only display results from the USA. This is the current code snippet: $(function() { function log( message ) { $( "<div>" ).text( message ).pr ...

javascriptjqueryajaxjsonrequest

Placing pins on Google Maps

I'm attempting to display two separate markers on two individual maps positioned next to each other on my website. <script type="text/javascript"> var map, map2; function initialize(condition) { // setting up the maps var myOptions = { zoo ...

javascripthtmlgoogle-maps

Utilizing AngularJS to Retrieve URL Parameters Within a Controller

I am attempting to retrieve URL parameters in my controller: Although I came across this example, I encountered an error that appears to be connected to the loading of necessary modules. app.controller('WidgetCtrl', ['$scope', '$ ...

javascriptangularjsurlurl-parameters

Trigger an event within a linked component

I've been working on a connected component where I'm attempting to dispatch the clear action from. Here's a snippet of the code: import {createElement} from 'react'; import reduce from 'lodash/fp/reduce'; import {connect ...

javascriptreactjsredux

When an onClick event is triggered in jQuery, generate a certain number of div blocks based on the available list items, such as image source and heading text

Is it possible to generate input fields dynamically based on a dynamic list with checkboxes, labels, text, images, etc.? I currently have a working solution for checkboxes and labels using the code snippet below: let $checkboxContent = $('.checkboxes ...

javascriptjquery

"Learn the steps to access a JSON file directly from a URL within a Next.js

My goal is to upload a JSON file to the server from a URL, open it, parse it, and display its features on Google Maps. However, I am encountering an error with the "fs" library preventing me from opening the file. Below is the code: "use client" ...

javascriptreactjsnode.jsgoogle-mapsnext.js