VueJs router-link не работает, но скопированная с него ссылка работает в другой вкладке - PullRequest
Новая
       31

VueJs router-link не работает, но скопированная с него ссылка работает в другой вкладке

0 голосов
/ 04 февраля 2020

Я создаю веб-приложение с VueJs. У меня есть три страницы, приложения, реестры, личности. На странице приложений есть таблица с приложениями с link1 (localhost: 8080 / apps / {appid} / regs) для просмотра реестра в каждой строке. Аналогично на странице реестра есть ссылка2 (localhost: 8080 / apps / {appid} / regs / {regid} / ids) для просмотра его приложения.

Моя проблема в том, что когда я нажимаю link1 , я перехожу на страницу регистрации, но когда я нажимаю link2 , я перенаправляю на localhost: 8080 in вместо localhost: 8080 / apps / {appid} / regs / {regid} / ids . Но когда я копирую адрес из link2 и вставляю его в адресную строку, я перехожу на нужную страницу. Что я делаю не так?

Также я получаю следующее предупреждение в консоли -

[Vue warn] отсутствует параметр для именованного маршрута "regs": Ожидается "appid" будет определено

[Vue warn] отсутствует параметр для именованного маршрута "ids": ожидается определение "appid"

router. js

{
    path: "apps",
    name: "apps",
    component: () => import("./components/protected/Apps"),
},
{
    path: "apps/:appid/regs",
    name: "regs",
    props: true,
    component: () => import("./components/protected/Regs"),
},
{
    path: "apps/:appid/regs/:regid/ids",
    name: "ids",
    props: true,
    component: () => import("./components/protected/Ids"),
},

Приложения. vue

<template>
<table class="table table-striped mg-b-0">
    <thead>
        <tr>
            <th class="tx-left w-5">#</th>
            <th class="tx-left">Application</th>
            <th class="tx-left text-center w-5">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr v-bind:key="index" v-for="(app, index) in apps">
            <td class="masked">{{index+1}}</td>
            <td>{{app.name}}</td>
            <td class="text-center">
                <router-link class="bg-white" :to="{ name: 'regs', params: { appid: app.id}}">
                    <i class="fa fa-border fa-eye" title="View Registries"/>
                </router-link>
            </td>
        </tr>
    </tbody>
</table>
</template>

Regs. vue

<template>
<template v-if="appid">
<table class="table table-striped mg-b-0">
    <thead>
        <tr>
            <th class="tx-left w-5">#</th>
            <th class="tx-left">Registry</th>
            <th class="tx-left text-center w-5">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr v-bind:key="index" v-for="(reg, index) in regs">
            <td class="masked">{{index+1}}</td>
            <td>{{reg.name}}</td>
            <td class="text-center">
                <router-link class="bg-white" :to="{ name: 'ids', params: { appid: appid, regid: reg.id}}">
                    <i class="fa fa-border fa-eye" title="View Identities"/>
                </router-link>
            </td>
        </tr>
    </tbody>
</table>
</template>
</template>
<script>
export default {
    name: "Regs",
    props: ['appid'],
    ....
}

Идентификаторы. vue

<template>
<template v-if="appid && regid">
<table class="table table-striped mg-b-0">
    <thead>
        <tr>
            <th class="tx-left w-5">#</th>
            <th class="tx-left">Identity</th>
        </tr>
    </thead>
    <tbody>
        <tr v-bind:key="index" v-for="(id, index) in ids">
            <td class="masked">{{index+1}}</td>
            <td>{{id.name}}</td>
        </tr>
    </tbody>
</table>
</template>
</template>
<script>
export default {
    name: "Ids",
    props: ['appid','regid'],
    ....
}
</script>

1 Ответ

0 голосов
/ 04 февраля 2020

Кажется, что вы уже используете props appid 'и' regid ', когда реквизиты еще не полностью готовы в самом компоненте. Вот почему vue вернул предупреждение.

Вы можете сначала поставить условие перед выполнением vfor, чтобы убедиться, что реквизит уже имеет значение. как этот

Рег. vue

 <template v-if="appid">
       <tr v-bind:key="index" v-for="(reg, index) in regs">
                <td class="masked">{{index+1}}</td>
                <td>{{reg.name}}</td>
                <td class="text-center">
                    <router-link class="bg-white" :to="{ name: 'ids', params: { appid: appid, 
                      regid: reg.id}}">
                        <i class="fa fa-border fa-eye" title="View Identities"/>
                    </router-link>
                </td>
       </tr>
</template>

Идентификаторы. vue

<template v-if="appid &&  regid">
    <tr v-bind:key="index" v-for="(id, index) in ids">
            <td class="masked">{{index+1}}</td>
            <td>{{id.name}}</td>
    </tr>
</template>
...