Vue 2 路由配置：如何通过相对路径跳转至其他产品版本

方案一：全局路由前置守卫拦截重定向 #

直接在Vue Router的全局前置守卫里做路径判断和修正，不用改动任何现有链接：

1. 在路由配置文件（比如router/index.js）中添加前置守卫：

router.beforeEach((to, from, next) => {
  // 匹配错误路径格式：/products/details/xxx/yyy/zzz（多了一级冗余路径）
  const wrongPathRegex = /^\/products\/details\/[^\/]+\/([^\/]+)\/([^\/]+)$/
  const match = to.path.match(wrongPathRegex)
  
  if (match) {
    // 提取正确的productId和versionId
    const [, productId, versionId] = match
    // 重定向到正确路径
    next(`/products/details/${productId}/${versionId}`)
  } else {
    // 正常路径直接放行
    next()
  }
})

这个正则会匹配所有多了一级的错误路径（比如/products/details/product_A_Id/product_B_Id/version_1_Id），提取出后面两级作为正确的参数，自动跳转到合法地址。

方案二：自定义指令修正v-html渲染的链接 #

如果版本描述是通过v-html渲染的，可以写个自定义指令自动给链接补全../：

1. 注册全局指令：

app.directive('fix-link', {
  mounted(el) {
    const links = el.querySelectorAll('a')
    links.forEach(link => {
      const href = link.getAttribute('href')
      // 只处理相对路径且未加../的链接
      if (href && !href.startsWith('../') && !href.startsWith('/') && !href.startsWith('http')) {
        link.setAttribute('href', `../${href}`)
      }
    })
  }
})

2. 在使用v-html的节点上添加指令：

<div v-html="versionDesc" v-fix-link></div>

这个方法会自动批量修正所有符合条件的链接，不用手动修改数据库内容。

方案三：通配路由兜底重定向 #

也可以在路由配置里加一条兜底路由，匹配错误路径格式并重定向：

const routes = [
  // 你的正常业务路由
  { path: '/products/details/:productId/:versionId', component: ProductVersionDetail },
  // 兜底处理错误路径
  {
    path: '/products/details/:wrongProductId/:productId/:versionId',
    redirect: to => {
      return `/products/details/${to.params.productId}/${to.params.versionId}`
    }
  }
]

注意这条路由要放在所有正常路由的后面，避免干扰正常路径的匹配。

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