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
        },
    ]
})

Answer 1

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 ;)