Передача идентификатора через маршрутизатор-ссылку в Vue.js

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

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

vuejs2 routerlink
person Samuel chevarie    schedule 08.08.2018    source источник
comment
я забыл упомянуть, что обе мои ссылки на маршрутизатор немного отличаются из-за моих попыток, я оставил их там, надеясь, что по крайней мере один из них является правильным способом сделать это   -  person Samuel chevarie    schedule 08.08.2018
comment
Вы уверены, что не используете vuejs2 вместо vue.js здесь?   -  person li x    schedule 08.08.2018
comment
мои зависимости показывают, что у меня есть vue: ^ 2.5.16, vue-router: ^ 3.0.1   -  person Samuel chevarie    schedule 08.08.2018
comment
Удачи с моим ответом?   -  person li x    schedule 08.08.2018
comment
пока нет, у меня возникли проблемы с работой const router в моем теге script, поэтому вместо этого я использовал это‹router-link :to={ path: '/Pulse/Definition/id:' + this.id,id:'Alignment '}... и теперь мой URL-адрес выглядит так: Pulse/Definition/id:undefined. Я также сделал быструю настройку своего оператора if else, поэтому теперь я использую this.$route.query.id вместо простого идентификатора.   -  person Samuel chevarie    schedule 08.08.2018
comment
Маршрутизатор const — это просто пример, в большинстве проектов вы уже начинаете с файла маршрутизации, который затем импортируется в ваш main.js, и вы захотите его отредактировать.   -  person li x    schedule 08.08.2018
comment
Вам также не нужна часть /id, так как в вашем случае это должно быть просто /Alignment   -  person li x    schedule 08.08.2018
comment
Кроме того, вам в первую очередь нужен маршрутизатор, если вы собираетесь использовать router-link   -  person li x    schedule 08.08.2018
comment
у меня уже есть полностью работающий роутер, выложу в правки   -  person Samuel chevarie    schedule 08.08.2018

Ответы (2)


arrow_upward
12
arrow_downward

Обычно, когда вы используете маршрутизатор внутри приложения 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>
person li x    schedule 08.08.2018

arrow_upward
3
arrow_downward

Я нашел решение, спасибо за помощь li x и моему старшему коллеге, вот awnser.

моя рабочая ссылка на маршрутизатор на странице 1

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

я добавляю идентификатор (выравнивание) к моему 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] для получения моего идентификатора, и моя страница маршрутизатора осталась прежней.

спасибо всем за огромную помощь ;)

person Samuel chevarie    schedule 08.08.2018
comment
Это именно то, что мой ответ говорит вам делать, хотя я рад, что вы решили свою проблему. Не совсем справедливо, что теперь я ничего не получаю за то, что потратил время на его публикацию. - person li x; 09.08.2018
comment
Согласен с @lix - person user1775718; 21.01.2019