Vue 路由器：禁用页面重新加载时以及转到另一个部分时的转换

Question

我正在寻找一种在以下情况下禁用转换的方法：

1. 我刷新页面，这样只有在切换路线时才有效

2. 当我转到某个特定部分时。例如，我在

   Home

   ，我想去这条路线的

   #about

   路段。

这就是我里面的东西

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

轻微例外。 有了这个，假设我有 3 个路由器链接：

Search Recipes

、

Home

、

About

，其中

About

是指向与

Home

相同的 URL 的链接，但带有

hash: '#about'

。如果我现在位于

Search Recipes

并且点击

About

，我应该被发送到

Home

及其

#about

部分。在这种情况下，我希望应用转换。但是，当我已经位于

Home

上时，我不希望应用过渡，而我只想滑动到

#about

部分。希望你能理解我的解释。

我使用 router-link 作为该部分的链接：

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

这是我的路由器设置：

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 };
        }
    },
});

还有我的路线：

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,
    },
];

请给出解决方案，如果可能的话，用类似于我的示例来重现它。

Answer 1

您可以创建一个名为transitionName的data()，并使用默认值：

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

然后将其分配到您的 Transition 标签上：

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

然后，您可以在每个组件内使用 beforeRouteEnter、beforeRouteUpdate 和/或 beforeRouteLeave，并带有条件，以便通过 $emit 更改您的transitionName。

或者你可以在 main.js 中创建一个全局 router.beforeEach

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

使用 Mixin

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

另请注意，您可以在路由器内指定特定的transitionName。

关于哈希：“#about”我不确定