How to change route component without changing route address



  • 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 ?



  • 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



  • 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 }
    ....
    


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



  • @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>
    


  • 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



  • 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



  • @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.



  • @metalsadman …thanks, I willl just follow your suggestion


Log in to reply