Vue项目中能否在router/index.js配置实现点击菜单跳转外部链接？

完全可以在router/index.js中实现该需求，无需修改菜单组件代码，直接通过Vue Router的路由守卫能力即可完成。

单条外部路由实现方案 #

直接在对应路由配置项中添加beforeEnter独享守卫，匹配到路由时直接触发外部跳转即可，配置示例如下：

let router = new Router({
  base: process.env.BASE_URL,
  mode: "history",
  routes: [
    {
      path: "/xxx",
      name: "dashboard",
      meta: {},
      // 独享路由守卫，进入该路由前触发
      beforeEnter: () => {
        // 必须补全http/https协议头，否则会被识别为站内相对路径
        window.location.href = "https://www.xxxxafafa.org"
      }
    },
    // 其他路由配置...
  ]
})

多条外部路由批量实现方案 #

如果有多个路由都需要跳外部资源，可以统一用全局前置守卫批量处理，避免每条路由都写重复的守卫代码：

1. 所有需要跳转外部的路由，在meta字段中添加自定义的外部链接标识：

routes: [
  {
    path: "/xxx",
    name: "dashboard",
    meta: {
      externalUrl: "https://www.xxxxafafa.org"
    }
  },
  {
    path: "/yyy",
    name: "google",
    meta: {
      externalUrl: "https://www.google.com"
    }
  }
]

2. 在路由实例化后添加全局前置守卫：

router.beforeEach((to, from, next) => {
  // 匹配到带外部链接标识的路由时直接跳转
  if (to.meta.externalUrl) {
    window.location.href = to.meta.externalUrl
    return
  }
  // 普通路由正常放行
  next()
})

注意事项 #

• 外部链接必须携带完整的http://或https://协议头，省略协议会被浏览器识别为当前站点的相对路径，导致跳转失败
• 如需新窗口打开外部链接，可将window.location.href替换为window.open(目标链接, '_blank')，需注意符合浏览器弹窗拦截规则
• 跳转外部资源后，原站点的历史记录会保留对应路由path，点击浏览器返回键可正常回到跳转前的页面

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