Vue 2: configure router to navigate to other product using relative path-CodePudding

I am new to vue but I need to fix some issue.

I have app with some products and its verions. I am able to view details of some version when accessing the path: /products/details/productId/versionId Let's say I am accessing product A and its version 1 and path to it is: /products/details/product_A_Id/version_1_Id

In the description of this product version there is a link to different product and different version set as: <a href="product_B_Id/version_1_Id">Product_B/Version_1</a> So when I am accessing this link I am redirected to: /products/details/product_A_Id/product_B_Id/version_1_Id and then redirected to 404 as there is no such path.

After changing link to <a href="../product_B_Id/version_1_Id">Product_B/Version_1</a> I am redirected to correct product and correct version. But the issue is that there are a lot of links that are pasted in without ../ and using some db script will not be an easy solution. Is there any easy way that will fix above issue? Any router method that will do what it takes to nevigate me to correct product version?

CodePudding user response：

You can use <router-link to="/product_B_Id/version_1_Id">Product_B/Version_1</router-link>

CodePudding user response：

I have achieved it by adding children path in vue router and redirecting it to page productId/versionId:

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