防止Vue子组件跳转到父组件

可以通过在子组件中添加一个守卫来实现防止从子组件跳转到父组件的目的。在守卫中使用 $router.back() 方法可以实现跳转回上一个页面。具体实现代码如下：

// 在子组件中添加守卫 <template> <div> <button @click="goBack">返回</button> </div> </template>

<script> export default { methods: { goBack() { if (this.$route.matched.length > 1) { this.$router.go(-1); } else { this.$router.push('/'); } }, }, }; </script>

// 在父组件中添加路由跳转 <template> <div> <router-link to="/childComponent">进入子组件</router-link> <child-component /> </div> </template>

<script> import ChildComponent from './ChildComponent.vue';

export default { components: { ChildComponent, }, }; </script>