Vuejs dynamic routes with variable parameters

Question

I start with vueJs and Webpack and I want to use vue router to create routes for elements of my table.

First i have the code of my table :

    <table class="table table-condensed">
                <tr style="text-align:left;" v-for="data in metadata">
                    <td>{{data.id}}</td>
                    <td><router-link :to="{ name: 'mixtapesDetails'}">
                        {{data.title}}
                    </router-link></td>
                    <td><router-link :to="{ name: 'mixtapesDetails'}">
                        {{data.artist}}
                    </router-link></td>
                </tr>

        </table>

Then i have my Js function to get all my data :

export default {
  data(){
    return {
        metadata: null
    }
  },
  methods:{
    httpGet(theUrl){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET", theUrl, false); // true for asynchronous request
    xmlHttp.send(null);
    console.log(JSON.parse(xmlHttp.responseText));
    return JSON.parse(xmlHttp.responseText);
    }
  },
  mounted(){
    this.metadata = this.httpGet("urltooJsondata");
  }
}

And then i have my routes in JS :

export default new VueRouter({
routes: [
  {
    path: '/mixtapeList',
    name: 'mixtapeList',
    component: mixtapeList
  },
{
    path: '/mixtapesDetails/:id',
    name: 'mixtapesDetails',
    component: mixtapesDetails
}
]

})

The objectif is that when i click on a router-link it goes to a single page with a url like this /mixtapesdetails/id. But the difficult part is that i want the id = {{this.data.id}}. Sorry for my english, I really need help and i don't find the solution on web.

akatakritos · Accepted Answer · 2017-11-15 15:17:45Z

2

Use the params object to specify:

<router-link :to="{ name: 'mixtapesDetails', params: { id: data.id } }">
     {{data.title}}
</router-link>

When id is 1234 that should send you to /mixtapeDetails/1234 according to your router configuration.

See https://router.vuejs.org/en/api/router-link.html

answered Nov 15, 2017 at 15:17

akatakritos

9,8781 gold badge25 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

moses toh Over a year ago

@akatakritos Maybe you can help me. Look at this : stackoverflow.com/questions/57836601/…

Collectives™ on Stack Overflow

Vuejs dynamic routes with variable parameters

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related