如何从Login路由跳转至Home时触发欢迎模态框显示？

这里有两种可靠的实现方式，按需选择即可：

方法一：使用组件内路由守卫 beforeRouteEnter #

这个钩子会在组件实例创建前触发，能精准判断来源路由，还能避免模态框闪显的问题：

<template>
  <div class="home">
    <el-dialog v-model="visible" title="欢迎">
      登录成功，欢迎回来！
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    };
  },
  beforeRouteEnter(to, from, next) {
    // 匹配Login路由的路径，注意路径要和你实际配置的一致
    if (from.path === '/Login') {
      // 钩子内无法直接获取组件实例，通过next的回调设置visible
      next(vm => {
        vm.visible = true;
      });
    } else {
      next();
    }
  }
};
</script>

方法二：在 mounted 钩子中判断路由来源 #

如果逻辑更偏向组件渲染后处理，直接用this.$route.from获取来源路由即可：

<template>
  <div class="home">
    <el-dialog v-model="visible" title="欢迎">
      登录成功，欢迎回来！
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    };
  },
  mounted() {
    // 检查来源路由是否为Login
    if (this.$route.from.path === '/Login') {
      this.visible = true;
    }
  }
};
</script>

注意事项 #

• 确保from.path的值和你Login路由的实际配置一致（比如如果是小写的/login，就要改成对应路径，路由路径区分大小写）；
• beforeRouteEnter适合需要提前判断的场景，不会有组件渲染后再弹框的延迟感；mounted则逻辑更直观，适合简单场景。

内容的提问来源于stack exchange，提问作者Maflec