VueJs 路由器链接不起作用，但从中复制的链接在另一个选项卡中有效

Question

我正在使用 VueJs 构建一个 webapp。我有三个页面，应用程序，注册表，身份。在应用程序页面中，有一个表格，其中包含带有 link1 (localhost:8080/apps/{appid}/regs) 的应用程序，可在每一行中查看其注册表。同样在注册表页面中，有一个 link2 (localhost:8080/apps/{appid}/regs/{regid}/ids) 查看它的应用程序。

我的问题是，当我点击 link1 时，它会将我带到注册表页面，但是当我点击 link2 时，它会将我带到 localhost:8080 而不是 localhost:8080/apps/{appid}/regs/{regid}/ids。但是，当我从 link2 复制地址并粘贴到地址栏中时，它会将我带到所需的页面。我做错了什么？

我也在控制台中收到以下警告 -

[Vue 警告] 命名路由“regs”缺少参数：预期“appid”为 被定义

[Vue 警告] 命名路由“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>

Answer 1

您似乎已经在使用道具 appid' 和 'regid' ，其中道具尚未在组件本身中完全准备好。这就是 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>