Question

我有2个链接到同一页面（定义页面）的路由器链接，但具有不同的ID，在我的定义页面中，我有一个if else循环来检查ID，然后发布该ID的适当定义。我的问题是我的循环无法正确读取我的ID并直接进入我的else语句，这是我使它起作用的最接近的结果。

我在第1页中的2条路由器链接

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

任何帮助和/或参考将不胜感激

Answer 1

通常，当您在Vue应用程序中使用路由器时，要使用路由参数，请查看动态路由链接here。

使用相同的示例：

const router = new VueRouter({
  routes: [
    // dynamic segments start with a colon
    { path: '/user/:id', component: User }
  ]
})

只要我们导航到存在/user/的URL，只要在我们可以匹配其中/:id部分的位置上添加一些内容，就在这里。然后，在组件内部，我们可以查询参数以获取在URL中发送的ID：

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>

Answer 2

我在li x和我的一位高级同事的帮助下找到了解决方案，这里是遮阳篷。

我在第1页上的工作路由器链接

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

使用[：to =“ {path：'/ Pulse / Definition /'+'Alignment'}”]将id（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]检索我的ID，我的路由器页面保持不变。

谢谢大家的大力帮助；）

通过Vue.js中的router-link传递ID

2 个答案: