Question 288714 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Vue router: disable transition on page reload and when going to another section

I’m looking for a way to disable the transition when:

  1. I refresh the page, so that it only works when I switch between routes

  2. And when I go to a particular section. For example, I am at the Home and I want to go to the #about section on this route.

This is what I have inside <main>:

<template>
    <main>
       <RouterView #="{ Component }">
        <transition mode="out-in" name="fade">
            <component :is="Component" :key="$route.fullPath" />
        </transition>
    </RouterView>
    </main>
</template>

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
</script>

<style lang="scss">
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.2s ease;
}
</style>

Slight exception.
With this, let’s say I have 3 router-links: Search Recipes, Home, About, where About is a link that leads to the same URL as Home, but with a hash: '#about'. If I’m at Search Recipes right now and I click on About, I should be sent to Home and its #about section. In this case I want the transition to be applied. However, I don’t want the transition to be applied when I’m already on the Home and I just want to slide to the #about section. Hope you understand my explanation.

I use router-link for a link to the section:

<router-link
  class="nav__menu-link"
  :to="{ name: 'home', hash: '#about' }">
  About</router-link
>

This is my router setup:

import { createRouter, createWebHistory } from 'vue-router';
import { routes } from '@/router/routes.js';

export const router = createRouter({
    history: createWebHistory(),
    routes,
    scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition;
        } else if (to.hash) {
            return { el: to.hash, behavior: 'instant' };
        } else {
            return { top: 0 };
        }
    },
});

and my routes:

import ViewHome from '@/view/ViewHome.vue';
import ViewSearchRecipe from '@/view/ViewSearchRecipe.vue';

export const routes = [
    {
        path: '/',
        name: 'home',
        component: ViewHome,
    },
    {
        path: '/searchRecipes/:name?',
        name: 'searchRecipes',
        component: ViewSearchRecipe,
    },
];

Please, give a the solution and if possible, reproduce it with a similar to mine example.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Task #1 is done.

    I had a mistake in the transition styles:

    .fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

    Instead it should be without '-from':

    .fade-enter,
.fade-leave-to {
    opacity: 0;
}

    This way we won't have a transition on page reload.


  2. 0

    You could create a data() called transitionName, with a default value:

      data() {
    return {
      transitionName: 'fade', // Specify the initial transition name
    };
  },

    and then assign it on your Transition tag:

    <template>
    <main>
       <RouterView #="{ Component }">
        <transition mode="out-in" :name="transitionName">
            <component :is="Component" :key="$route.fullPath" />
        </transition>
    </RouterView>
    </main>
</template>

    You can then use beforeRouteEnter, beforeRouteUpdate and/or beforeRouteLeave inside each of your components, with conditions in order to change your transitionName via $emit.

    Or you can create a global router.beforeEach in your main.js

    router.beforeEach((to, from) => {
  // conditions here
})

    with a Mixin (that is globally accessible and modifiable)

    export const TransitionNameMixin = {
  data() {
    return {
      transitionName: 'fade', // Default transition name
    };
  },
  methods: {
    updateTransitionName(newName) {
      this.transitionName = newName;
    },
  },
};

    Also note that you can specify specific transitionName inside your router.

    You can create a transition named "none" that doesn’t have any css or reset CSS.

    Regarding the hash: ‘#about’ I’m not sure

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search