Passing ID through router-link in Vue.js

Question

I have 2 router links that link to the same page (definition page) but has different ids, in my definition page I have an if else loop that checks the id and then posts the apropriate definition for that id.my problem is that my loop can't properly read my id and goes straight to my else statment, this is the closest that I've gotten it to work.

My 2 router-links in page 1

<router-link :to="{ path: '/Pulse/Definition',id:'Alignment'}" v-bind:tooltip="Alignment" append><a >Read more ></a></router-link>
<router-link :to="{ path: '/Pulse/Definition'}" id="Trust" append><a >Read more ></a></router-link>

My definition page

<template>
    <div class="PulseDefinition page row">
        <h2 v-if=" id=='Alignment'">hello world {{id}}</h2>
        <h2 v-else-if=" id=='Trust'">hello world {{id}}</h2>
        <h2 v-else>Sorry try again</h2>
        
    </div>

</template>
<script>
export default {
    
}
</script>
<style scoped>
.PulseDefinition{
    margin-top:2.5rem;
    margin-left:3rem;
    background-color: aquamarine;
    width:50rem;
    height:50rem;
    
}
</style>

Router

import Vue from 'vue';
import Router from 'vue-router';
import Community from '../components/PulseCommunity';
import Home from '../components/Home';
import Definition from '../components/Definition.vue';

Vue.use(Router)

export default new Router({
    routes:[
        {
            path:'Tuba',
            name:'Tuba',
            component: Default
        },
        {
            path:'/Pulse',
            name:'Pulse',
            component:PulseNav,
            children:[{
                path:'/Pulse/Overview',
                name:'Overview',
                component:Overview
            },
            {
                path:'/Pulse/Personal',
                name:'Personal',
                component:Personal
            },
            {
                path:'/Pulse/Community',
                name:'Community',
                component:Community
            },
            {
                path:'/Pulse/Definition/:id',
                name:'Pulse Definition',
                component:Definition
            }
            
            ]
        },
        {
            path:'/Coaching',
            name:'Coaching',
            component:Coaching
        },
        {
            path:'/Comunication',
            name:'Comunication',
            component:Comunication
        },
        {
            path:'/Home',
            name:'Home',
            component:Home
        },
    ]
})

i forgot to mention that both my router links are slightly different because of my attempts, i left them there hoping at least one of them is the right way of doing it — Samuel chevarie, Aug 08 '18 at 13:23
Are you sure your not using [tag:vuejs2] instead of [tag:vue.js] here? — li x, Aug 08 '18 at 13:25
my dependencies show that i have "vue": "^2.5.16", "vue-router": "^3.0.1" — Samuel chevarie, Aug 08 '18 at 13:33
not yet, i had some trouble getting the const router working in my script tag, so i used this instead" — Samuel chevarie, Aug 08 '18 at 14:26
The const router is just an example, in most projects you'll already start with a routing file which is then imported in your `main.js` you'll want to be editing that. — li x, Aug 08 '18 at 14:27
You also do not need the `/id` part as this should just be `/Alignment` in your case — li x, Aug 08 '18 at 14:29
Also you need to have a router in the first place if your going to be using a `router-link` — li x, Aug 08 '18 at 14:37
i already have a fully functioning router, ill post it in the edits — Samuel chevarie, Aug 08 '18 at 16:01

score 19 · Answer 1 · answered Aug 08 '18 at 13:38

Normally when your using the router inside of a Vue application you'll want to use route parameters, check out the dynamic routing link here.

Using the same example:

const router = new VueRouter({
  routes: [
    // dynamic segments start with a colon
    { path: '/user/:id', component: User }
  ]
})

Here in our router whenever we navigate to a url where /user/ is present providing we then add something after we can match the /:id section of it. Then inside of our component we are able to query the parameters for the ID that was sent in our url:

console.log(this.$route.query.id)

Using this we could then save that value into our component or we could build reactivity around this.$route.query.

In your case you'd only need to append to the string that you pass into that router link by simply using your data / methods or if you require further rules you could use a computed method. This might become or something simmilar:

<router-link :to="{ path: '/Pulse/Definition'+ this.alignmentType}" v-bind:tooltip="Alignment" append><a >Read more ></a></router-link>

score 1 · Accepted Answer · answered Aug 08 '18 at 17:59

i found a solution thx to the help of li x and a senior coworker of mine,here is the awnser.

my working router-link in page 1

<router-link :to="{ path: '/Pulse/Definition/'+'Alignment'}" v-bind:tooltip="Alignment" append><a >Read more ></a></router-link>

im adding the id(Alignment) to my url with[:to="{ path: '/Pulse/Definition/'+'Alignment'}"]

my definition page

<template>
    <div class="PulseDefinition page row">
        <h2 v-if=" this.$route.params.id=='Alignment'">hello world {{this.$route.params.id}}</h2>
        <h2 v-else-if=" this.$route.params.id=='Trust'">hello world {{this.$route.params.id}}</h2>
        <h2 v-else-if=" this.$route.params.id=='undefined'">Sorry try again {{this.$route.params.id}}</h2>
        <h2 v-else>XXXSorry try againXXX{{this.$route.params.id}}</h2>
        <!-- {{console.log("hi")}} -->
    </div>

</template>
<script>
// console.log(this.$route.query.id);
export default {

}
</script>

im using [this.$route.params.id] to retrieve my id, and my router page stayed the same.

thank you all for the great help ;)

This is exactly what my answer is telling you to do, while I'm happy you solved your problem It's not exactly fair that I now get nothing for taking the time to post it. — li x, Aug 09 '18 at 07:20

Passing ID through router-link in Vue.js

2 Answers2