Home > Mobile >  How to set router link in vue.js to use alias as a slug?
How to set router link in vue.js to use alias as a slug?

Time:03-17

I have problem generating links via vue-router. I set my route in vue-router like so:

const routes = [
...
{
  path: '/:version/terms-and-conditions',
  name: 'Terms',
  component: Terms,
  alias: ['/:version/privacy-policy']
},
...
]

I can use router-link with parameters:

<router-link :to="{name: 'Terms', params: { version: 'v1' }}">Link</router-link>

however it generates link to the main path:

http://localhost:8081/v1/terms-and-conditions

What I'm trying to achieve is to use vue-router to get link to:

http://localhost:8081/v1/privacy-policy

I know that I could possibly add a separate path for the same Terms Component, but I'd love to use alias if possible to make things cleaner. Any idea how to do it (using path from alias array)?

CodePudding user response:

I believe you could just specify the route in your router-link like so:

<router-link to="/v1/privacy-policy">Link</router-link>

The router will then resolve the link using the alias you've defined.

  • Related