Angular 5跨应用路由跳转问题：点击登出如何跳转至不同端口外部应用

你遇到的问题很典型——Angular的Router是专为单页应用（SPA）的内部路由设计的，它只会在当前应用的路由体系内导航，所以你直接传localhost:3000/home会被当成相对路径，自然就追加到当前URL后面了。

要跳转到完全独立的外部应用，你需要跳出Angular Router的范畴，直接使用浏览器原生的API：

方法一：替换当前页面跳转（最常用） #

在你的登出按钮点击事件里，用window.location.href直接指定完整的外部URL，记得一定要加上http://或https://前缀：

logout() {
  // 先处理你的登出逻辑，比如清除本地存储的token、用户信息等
  window.location.href = 'http://localhost:3000/home';
}

方法二：在新标签页打开目标应用 #

如果需要在新标签页打开目标应用，可以用window.open：

logout() {
  // 处理登出逻辑
  window.open('http://localhost:3000/home', '_blank');
}

关键注意点 #

千万别省略http://前缀！如果只写localhost:3000/home，浏览器会默认把它当作当前域名下的相对路径，就会出现你之前遇到的URL拼接问题。

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