Передача идентификатора через router-link в Vue.js

Question

У меня есть 2 ссылки на маршрутизатор, которые ссылаются на одну и ту же страницу (страницу определения), но имеют разные идентификаторы, на моей странице определения у меня есть цикл if else, который проверяет идентификатор, а затем публикует соответствующее определение для этой проблемы id.my состоит в том, что мой цикл не могу правильно прочитать мой идентификатор и идет прямо к моему другому отчету, это самое близкое, что я заставил его работать.

мои 2 роутера-ссылки на странице 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>

моя страница определения

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

маршрутизатор

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

Я нашел решение, благодаря помощи li x и моего старшего сотрудника, вот вам и новичок.

мой рабочий роутер-ссылка на стр. 1

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

я добавляю id(выравнивание) в мой URL с помощью [:to="{ path: '/Pulse/Definition/'+'Alignment'}"]

моя страница определения

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

Я использую [this.$route.params.id], чтобы получить мой идентификатор, и моя страница маршрутизатора осталась прежней.

спасибо всем за большую помощь;)

Answer 2

Обычно, когда вы используете маршрутизатор внутри приложения Vue, вы хотите использовать параметры маршрута, проверьте ссылку динамической маршрутизации здесь.

Используя тот же пример:

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

Здесь, в нашем маршрутизаторе, когда мы перейдем к URL, где /user/ присутствует при условии, что мы добавим что-то после того, как сможем сопоставить /:id раздел этого. Затем внутри нашего компонента мы можем запросить параметры для идентификатора, который был отправлен в нашем URL:

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

Используя это, мы можем затем сохранить это значение в нашем компоненте или построить реактивность вокруг this.$route.query,

В вашем случае вам нужно будет только добавить строку, которую вы передаете в ссылку на маршрутизатор, просто используя ваши данные / методы, или, если вам требуются дополнительные правила, вы можете использовать вычисляемый метод. Это может стать или что-то похожее:

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