Laravel8集成Vue2时父子组件$emit失效，Login组件无法正常隐藏问题求助

现有代码核心错误点 #

• Login组件中重复声明template属性，直接覆盖了<template>标签内的页面结构，导致你写的登录页代码完全不生效
• <router-link>标签上使用了.prevent修饰符，阻止了路由跳转的默认行为，点击后只会触发hideLogin方法不会跳转页面
• App.vue中将Login组件与<router-view>平级放置，没有把Login纳入路由管理体系，自然无法被路由跳转替换

分步修复代码 #

第一步：修复Login.vue的错误 #

删除script内多余的template: HeaderNav代码，同时去掉<router-link>上的.prevent修饰符：

<template>
<div id="login">
    <header-nav></header-nav>
    ...
                    <form>
                       ...
                            <label>
                                <input type="email" v-model="email" name="email" class="form-control" placeholder="email">
                            </label>
                        ...
                            <label>
                                <input type="password" v-model = "password" name="password" class="form-control" placeholder="password">
                            </label>
                        ...
                            <label>
                                <input type="checkbox">
                            </label>Remember Me
                        ...
                            <input type="submit" v-on:click.prevent="login" value="Login" class="btn float-right login_btn">
                       ...
                    </form>
                <div class="card-footer">
                    <div class="d-flex justify-content-center links">
                        Don't have an account?
                        <router-link to="register" v-on:click='hideLogin'>Sign Up</router-link>
                    </div>
                    <div class="d-flex justify-content-center">
                        <a href="#">Forgot your password?</a>
                    </div>
                </div>
</div>
</template>

<script>
import HeaderNav from "../layout/HeaderNav";

export default {
    name: "Login",
    components: {HeaderNav},
    data: () => {
        return {
            email: '',
            password: ''
        }
    },
    methods:{
        login(){
            this.$store.dispatch('users/login', {email: this.email, password: this.password})
            // 登录成功后加跳转逻辑
            .then(() => {
                this.$router.push('/home') // 替换成你实际的首页路径
            })
        },
        hideLogin(){
            this.$emit('hideLogin');
            console.log('Hide login');
        }
    }
    // 删掉原来多余的template: HeaderNav代码
}
</script>

第二步：优化路由配置（推荐方案，不需要手动控制组件显隐） #

把Login页配置成路由规则的默认路由，直接删除App.vue里单独引入的Login组件和显隐控制逻辑：

路由配置文件（通常是router/index.js）新增规则：

import Login from './components/auth/Login'
import Register from './components/auth/Register'
// 其他组件引入

const routes = [
  {
    path: '/',
    component: Login
  },
  {
    path: '/register',
    component: Register
  },
  // 其他页面路由
]

修改后的App.vue代码：

<template>
    <div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: "App"
}
</script> 

修改后所有页面都通过<router-view>渲染，路由跳转时会自动替换内容，不需要额外控制登录组件的显隐。

临时兼容方案（保留你现有显隐逻辑） #

如果你不想修改现有结构，确保登录成功后调用hideLogin方法同时触发路由跳转即可：
在Login.vue的login方法的成功回调里加上this.hideLogin()。

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