The Vue router requires a page reload to see changes and does not have access to the this

When navigating through router-link, the App.vue page opens initially, but the URL changes immediately without displaying the content. Reloading the page is necessary to view it. If you navigate programmatically, you may encounter an error stating 'Cannot read property' $ router 'of undefined'.

I've followed Vue docs for setting up routes and components, but I'm still facing issues.

routes.js

import Home from './views/Home.vue'
import Auth from './views/Auth.vue'
import Test1 from './views/Test1.vue'

export const routes =  [
{
  path: '/',
  name: 'home',
  component: Home
},
{
  path: '/auth',
  name: 'auth',
  component: Auth
},
{
  path: '/test1',
  name:'test1',
  component: Test1
}
]

App.vue

<template id="app">
  <v-ons-page>
    <Navbar titleb="lol"/>
    <router-view/>
  </v-ons-page>
</template>

<script>
import Navbar from './components/Navbar'

export default{
 name: 'app',
 data () {
 return {
  navTitle: ''
 }
  },
 components: {
  Navbar
  }
 }

 Auth.vue

 <template id="Auth">
 <div>

 <auth-c class="auth"/>
 <button v-on:click="gototest()">Test1</button>
 </div>
 </template>

 <script>
 import AuthC from '@/components/AuthC'

 export default {
 name: 'auth',
 methods:{
 gototest:()=>{
  this.$router.push({path:'/test1'})

 }
 },
 components: {
  AuthC
  }
 }

main.js

import 'onsenui/css/onsenui.css'
import 'onsenui/css/onsen-css-components.css'

import Vue from 'vue'
import App from './App.vue'
import { routes } from './router'
import Router from 'vue-router'
import store from './store'
import VueOnsen from 'vue-onsenui'
import axios from 'axios'
import './registerServiceWorker'

Vue.config.productionTip = false

Vue.use(VueOnsen)
Vue.use(Router)
let router = new Router({mode : 'history', routes})

new Vue({
 router,
 store,
 axios,
 render: h => h(App),
 beforeCreate () {
   this.$ons.disableAutoStyling() // Or any other method
  }
   }).$mount('#app')

Answer №1

The issue has been resolved by updating the router-view with the following code:

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

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

Looking for regex to extract dynamic category items in node.js

Working on node.js with regex, I have accomplished the following tasks: Category 1.2 Category 1.3 and 1.4 Category 1.3 to 1.4 CATEGORY 1.3 The current regex is ((cat|Cat|CAT)(?:s\.|s|S|egory|EGORY|\.)?)(&#xA0;|\s)?((\w+)?([. ...

Experiencing issues while attempting basic private key encryption with the Node crypto library

Currently, I am in the process of creating a quick proof of concept (POC) to encrypt an incoming string using a standard key. Below is the code snippet from my middleware: import Crypto from 'crypto'; export default async function encrypt(req, r ...

Deleting a row from a table in AngularJS can be accomplished by following these steps

I am having trouble with deleting rows from a table using angularjs. When I try to delete a row, it ends up deleting the previous row instead of the correct one. How can I fix this issue? Please check out the working DEMO Here is the code snippet: < ...

How can the entire menu be closed in Bootstrap 5 when clicking on a link or outside of the page?

I'm currently utilizing BootStrap 5 for constructing my webpage. Within my page, I have a NavBar Menu containing various links. <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

Issues with user-generated input not properly functioning within a react form hook

After following the example provided here, I created a custom input component: Input.tsx import React from "react"; export default function Input({label, name, onChange, onBlur, ref}:any) { return ( <> <label htmlF ...

I need to see the image named tree.png

Could someone assist me in identifying the issue with this code that only displays the same image, tree.png, three times? var bankImages = ["troyano", "backup", "tree"]; jQuery.each( bankImages, function( i, val ) { $('#imagesCon ...

Accessing object properties in the data of a Vue component

Recently delving into Vue, I've run into a bit of confusion. My app connects to a JSON Api using usePage(). The usePage() function allows me to utilize the "page" object within the <template> tag like so: <p>This product costs {{page.pric ...

How to send a JavaScript variable to Flask and trigger an AJAX reload action

Introduction: I have explored similar inquiries and attempted to apply relevant code/concepts but without success. -https://stackoverflow.com/questions/43645790/passing-javascript-variable-to-python-flask -https://stackoverflow.com/questions/10313001/is- ...

Tips for preserving line breaks when sending a message through the mail

Hi, I'm currently facing an issue: I am trying to send text from a textarea using POST to a PHP script that will write it to a file and display it on the website. However, when I do this, the line breaks disappear and the displayed text ends up lookin ...

Dispatch prop within useEffect

App.js -> <Lobbies inGame={inGame} setLobby={setLobby} userName={userName} userKey={userKey}/> Lobbies.js -> import React, { useState, useEffect } from 'react'; import firebase from 'firebase'; const Lobby = ({userKey, ...

Displaying a Div element containing dynamically calculated values based on selected options in Angular

As a newcomer to Angular, I decided to challenge myself by building a simple app. Currently, my select options only display the keys of a data object. What I really want to achieve is to show a value beneath the second select box for each team, which displ ...

Having trouble getting JavaScript to select a stylesheet based on time?

I am attempting to implement two different styles based on the time of day. Here is the code I am using to select the CSS file depending on the current time: <script type="text/javascript"> function setTimedStylesheet() { var currentTim ...

The process of isolating each variable within a JSON data structure

After making an ajax call, my JSON data is currently displayed in this format: {"main_object":{"id":"new","formData":"language=nl_NL&getExerciseTitle=test&question_takeAudio_exerciseWord%5B0%5D=test&Syllablescounter%5B0%5D=test&Syllablesco ...

PHP live data updating: stay current with real-time data updates

I have a functional API that is currently static, but I want it to update periodically and display live data in my HTML code. I'm not sure where to begin. Should I start with Javascript or Ajax? Any guidance would be greatly appreciated. This is my ...

Having difficulty accessing and updating data in a database while using Discord.js

My goal is to enable staff to respond to the last direct message (DM) by using ~reply <message> instead of ~dm <userID> <message>. However, before I can do that, I need to store the user's ID in a database to identify the last person ...

sending an array from Javascript to PHP

Utilizing JavaScript, I have successfully converted data from a file into an array. Now, my goal is to utilize input from a form to search through this array using PHP and present the results in a table. Despite browsing various solutions for similar probl ...

I aim to design a unique child window specifically for an "about" section within an electron js application on the Windows platform

I am looking to create a child browser window to showcase some key points about my application. According to the Electron JS documentation, it supports the "about" role for Mac OS but does not have built-in support for Windows. Therefore, I am in the pro ...

What could be causing the issue of images not loading in Chrome while they are loading perfectly in Mozilla when using CSS3?

Recently, I dove into a project utilizing react with webpack, and everything was smooth sailing until I encountered the CSS hurdle. Despite successfully configuring webpack, trouble brewed when it came to styling. Specifically, setting the background image ...

What is the best way to access original copies of code-split .js files in Vue.js and webpack without caching?

I have successfully installed Vue.js in my app, utilizing vue-cli and webpack. All is functioning well, including implementing code splitting to optimize component loading. However, I am facing an issue when releasing updates as the code-split .js files ge ...

Can Javascript be used to identify the number of td elements in a table and specify column widths within the table tags?

Is there a way to automatically add the "col width" tag based on the number of td tags within a Table tag? For example, if there are 2 td's, then it should add 2 "col width", and if there are 3 then, 3 "col width", and so on. <!DOCTYPE html> &l ...