Ссылка на маршрутизатор VueJs не работает, но ссылка, скопированная с нее, работает на другой вкладке

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

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

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

[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"),
},

Apps.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'],
    ....
}

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

vue.js vue-router routerlink
person Bopsi    schedule 04.02.2020    source источник
comment
Я собираюсь предположить, что ваша переменная appid (которая назначается через свойство) на самом деле не имеет значения. Вместо этого должно быть $router.params.appid   -  person Ohgodwhy    schedule 04.02.2020
comment
Да, appid действительно является параметром маршрутизатора   -  person Bopsi    schedule 04.02.2020
comment
да. Я хочу сказать, что вы используете: :to="{ name: 'ids', params: { appid: appid, regid: reg.id}}". Где appid в этом случае будет ссылаться на ваш prop. Однако props не увлажняются маршрутизатором, поэтому фактически должно быть: :to="{ name: 'ids', params: { appid: $router.params.appid, regid: reg.id}}"   -  person Ohgodwhy    schedule 04.02.2020
comment
Я использую router.vuejs.org/guide/essentials/passing-props.html этой документации, и я думаю, что следил за тем, что они пытались проинструктировать. Я также использовал ваш совет (я думаю, должен быть $ route вместо $ router), все та же проблема. Нажатие на ссылку приводит меня к localhost: 8080, но копирование адреса ссылки и вставка его в адресную строку, похоже, работает   -  person Bopsi    schedule 04.02.2020
comment
Пожалуйста, проверьте Regs.vuefile. Есть ли свойство id в данных regs.   -  person Tingsen Cheng    schedule 04.02.2020
comment
Или вы можете добавить v-if, чтобы контролировать видимость ссылки, чтобы избежать грязных данных. Как следующие <router-link v-if="reg.id" class="bg-white" :to="{ name: 'ids', params: { appid: appid, regid: reg.id}}">   -  person Tingsen Cheng    schedule 04.02.2020

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

Ids.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>
person Qonvex620    schedule 04.02.2020
comment
Пробовал и это, но все еще получаю предупреждение. Проверить мою правку - person Bopsi; 04.02.2020