How to change route component without changing route address

[folami]

Let say I’m on products page (/products/views) fetching data from backend and there is a problem, instead of redirecting to error404 page(/error404)…i would like to stay on the same route address and just render another page component…

Doing this will allow users to reload page and do some other stuffs on products page (/products/views)

I don’t know if this has to do with vue router ?

[s.molinari]

If there is a problem with the API/ backend, the app wouldn’t go to a 404 page automatically. If there is a problem with the API, you might want to just show a notification and maybe a countdown to say, “Lost Connection! Reconnecting in X seconds”. Other than that, you can programmatically control the route a user will be sent to with router.push(). https://router.vuejs.org/guide/essentials/navigation.html

Scott

[metalsadman]

use conditional rendering https://vuejs.org/v2/guide/conditional.html, import a whole page component one that you usually use on a route render that optional page if something failed from your api. something like…

<template>...
<q-page>
  <template v-if="condition">
   ... <!-- what you normally show on this route if nothing failed !-->
  </template>
  <template else>
      <!-- or show some alternate view -->
   <alter-view />
   ...
...</template>
<script>
import AlterView from 'pages/alternatepage/alternate-view'
export default {
...
  components: { AlterView }
....

[folami]

@metalsadman thanks for your response, but do I have to do this in all pages?

[turigeza]

@folami I have done exactly what @metalsadman suggests. You could register it however in the boot section and you don’t have to import it on every page. Like the code below.

import ANotFound from 'components/ANotFound';
export default ({ app, router, Vue }) => {
    Vue.component('a-not-found', ANotFound);
};

I just use the not found component in everything not just on pages but tab panes, tables, expansion-item …

My not found component looks like this

<template>
    <div class="absolute-center text-center">
        <p>
            <img
            src="~assets/sad.svg"
            style="width:30vw;max-width:150px;"
            >
        </p>
        <p class="text-faded">Sorry, nothing here...<strong>(404)</strong></p>
        <q-btn
        color="secondary"
        style="width:200px;"
        @click="$router.back()"
        >Go back</q-btn>
    </div>
</template>

<script>
export default {
    name: 'ANotFound'
};
</script>

[folami]

Thanks to everyone, I can make do of all options listed here… But there was a question related to this on github
was hoping there was solution to this

[s.molinari]

Ah, another thing you can do is use loading, and instead of a spinner, show a “Something went wrong” message, like I mentioned above.

https://quasar.dev/quasar-plugins/loading

Scott

[metalsadman]

@s-molinari said in How to change route component without changing route address:

Ah, another thing you can do is use loading, and instead of a spinner, show a “Something went wrong” message, like I mentioned above.

https://quasar.dev/quasar-plugins/loading

Scott

problem is he want to be on same route displaying a different page, which is what he linked that he wanted to do. @folami if you are sure that’s what you want then you will have to wait since that’s a vue router feature request judging from the thread which isn’t implemented yet, otherwise try those work around posted by others in those thread, just reviewed seem like an old thread too xD, dunno if that will ever be implemented any time sooner since most who were posting it trying to use it in different situation which the vue devs kinda don’t agree.

[folami]

@metalsadman …thanks, I willl just follow your suggestion