Vue 2：配置路由器以使用相对路径导航到其他产品

Question

我是 vue 的新手，但我需要解决一些问题。

我有一些产品及其版本的应用程序。 我可以在访问路径时查看某些版本的详细信息： /products/details/productId/versionId假设我正在访问产品 A 及其版本 1，它的路径是： /products/details/product_A_Id/version_1_Id

在这个产品版本的描述中有一个链接到不同的产品和不同的版本设置为： <a href="product_B_Id/version_1_Id">Product_B/Version_1</a>所以当我访问这个链接时，我被重定向到： /products/details/product_A_Id/product_B_Id/version_1_Id然后重定向到 404，因为没有这样的路径。

将链接更改为<a href="../product_B_Id/version_1_Id">Product_B/Version_1</a>后，我被重定向到正确的产品和正确的版本。 但问题是有很多链接没有../粘贴，使用一些 db 脚本将不是一个简单的解决方案。 有什么简单的方法可以解决上述问题吗？ 任何路由器方法都可以引导我更正产品版本？

Answer 1

您可以使用<router-link to="/product_B_Id/version_1_Id">Product_B/Version_1</router-link>

Answer 2

我通过在 vue 路由器中添加子路径并将其重定向到页面productId/versionId来实现它：

{
    path: 'products/details/:productid',
    name: 'productsdetails',
    component: ProductDetails,
    },
    children: [
      {
        path: ':productid/:versionid',
        redirect: {
          name: 'releaseDetails',
        },
      }
    ]
  },