Vue Router需求：切换路由时保持URL不变（无需重定向）

嘿，我明白你想要的效果了——切换不同组件（比如从Home到Foo）的时候，浏览器地址栏的URL完全原样不动，也不会触发任何重定向行为，对吧？下面给你两个实用的方案，你可以根据自己的实际场景来选：

方案一：用动态组件替代路由路径切换（最简单直接） #

如果你的核心需求只是切换组件，不需要利用路由路径的其他特性，那完全可以绕开Vue Router的多路由配置，直接用Vue原生的动态组件来实现，这也是最省心的方式：

1. 修改你的Vue实例代码：

$( document ).ready(function() {
  // 保留你的自定义组件定义
  const Home = { template: '<div id="login"><login-comp></login-comp></div>' };
  const Foo = { template: '<div>Foo</div>' };

  new Vue({
    el: '#router',
    data: {
      msg: 'Hello World',
      currentComponent: 'Home' // 用这个状态控制当前显示的组件
    },
    // 注册组件
    components: {
      Home,
      Foo
    },
    methods: {
      // 写个切换组件的方法，调用它的时候URL完全不会变
      switchComponent(componentName) {
        this.currentComponent = componentName;
      }
    }
  })
});

2. 把原来的<router-view>替换成动态组件模板：

<div id="router">
  <!-- 示例切换按钮，你可以换成自己的触发逻辑 -->
  <button @click="switchComponent('Home')">回到登录页</button>
  <button @click="switchComponent('Foo')">切换到Foo</button>
  <!-- 动态渲染当前组件 -->
  <component :is="currentComponent"></component>
</div>

这种方式完全不依赖路由路径变化，靠Vue的响应式状态直接控制组件渲染，URL从头到尾都不会有任何变动，也不会触发重定向。

方案二：基于Vue Router实现无URL变化的组件切换（保留路由逻辑） #

如果你想保留Vue Router的路由管理能力（比如要用到路由守卫、路由元信息这些特性），但又不想改变URL，可以试试这个思路：

只定义一个根路由，把需要切换的组件作为这个路由下的动态内容，用内部状态来控制渲染：

$( document ).ready(function() {
  const Home = { template: '<div id="login"><login-comp></login-comp></div>' };
  const Foo = { template: '<div>Foo</div>' };

  const router = new VueRouter({
    mode: 'history',
    routes: [
      { 
        path: '/', 
        // 定义一个容器组件，内部动态切换子组件
        component: {
          template: '<component :is="currentComponent"></component>',
          data() {
            return {
              currentComponent: 'Home'
            }
          },
          components: {
            Home,
            Foo
          },
          methods: {
            // 内部切换组件的方法
            switchComp(comp) {
              this.currentComponent = comp;
            }
          }
        }
      }
    ]
  })

  new Vue({ 
    router, 
    el: '#router', 
    data: { msg: 'Hello World' } 
  })
});

另外，如果你需要通过路由导航的方式触发切换（比如调用this.$router.push），但又不想改URL，可以配合全局路由守卫拦截导航，阻止URL变化：

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 如果要跳转的路由和当前路由路径不同
  if (to.path !== from.path) {
    // 这里可以通过Vuex或者全局状态来切换组件
    // 比如 store.commit('setCurrentComponent', to.name);
    next(false); // 阻止默认导航，URL不会变化
  } else {
    next(); // 正常放行
  }
});

不过这种方式需要额外加状态管理（比如Vuex）来维护当前组件，复杂度稍高，适合必须保留路由导航逻辑的场景。

总结 #

• 要是只是单纯切换组件，不需要路由的额外功能，方案一绝对是最优选择，简单高效，完全不会碰URL。
• 要是必须用Vue Router的路由管理能力，再考虑方案二，按需选择合适的实现方式。

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