VueJs路由器-链路不工作，但从它复制的链接在另一个选项卡中工作。

Question

我正在用VueJ构建一个网络应用程序。我有三页，应用程序，注册表，身份。在应用程序页面中，有一个带有link1 (localhost:8080/app/{appid}/regs)的应用程序的表，用于查看每一行的注册表。类似地，在注册表页面中，有一个link2 来查看它的应用程序。

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

而且我在控制台里收到了警告-

警告命名路由“regs”缺少param :预期要定义的"appid“

Vue警告命名路由“ids”缺少param :需要定义的"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之前，您可以先设置一个条件，以确保道具已经有了一个值。就像这个

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>