通过 Vue.js 中的路由器链接传递 ID

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 应用程序中使用路由器时，您会想要使用路由参数，请查看此处的动态路由链接。

使用相同的示例：

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

在我们的路由器中，每当我们导航到存在的 url 时，/user/我们都会在匹配/: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>