在 Vue.js 中通过 router-link 传递 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 应用程序中使用路由器时，您会想要使用路由参数，请查看动态路由链接 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，我的路由器页面保持不变。

感谢大家的大力帮助；）