$router.push跳转后消除当前组件

Question

在使用this.$router.push（"/login"）时，当前组件和目标组件同时显示，地址栏是目标组件的

Answer 1

【以下回答由 GPT 生成】

解决方案

要实现在使用this.$router.push("/login")进行跳转时，同时消除当前组件，只显示目标组件，并且地址栏显示目标组件的地址，可以采取以下步骤：

1. 在当前组件的<template>中，使用<router-view>标签将目标组件包裹起来，确保目标组件能够在当前组件中进行渲染。
2. 在当前组件的<script>中，使用this.$router.replace("/login")来替代this.$router.push("/login")，replace方法会替换掉当前的历史记录，而不是添加新的历史记录，从而达到消除当前组件的效果。
3. 在Vue Router的配置文件中，通过mode: "history"来设置路由模式为history模式，这样在地址栏中只会显示目标组件的地址，而不会显示历史记录。

示例代码如下：

<!-- 当前组件 -->
<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    goToLogin() {
      // 使用replace方法替代push方法
      this.$router.replace("/login");
    }
  }
}
</script>

// Vue Router 配置文件
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: "history",
  routes: [
    {
      path: "/login",
      name: "Login",
      component: Login
    },
    // 其他路由配置
  ]
})

这样，当调用goToLogin方法时，当前组件会被消除，只显示目标组件，并且在地址栏中只会显示目标组件的地址。

【相关推荐】

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7428692
• 你也可以参考下这篇文章：$router.push()跳转页面传参

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^