在 Vue.js 中通过路由器传递 ID-link

Question

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

我的 2 路由器-links 在第 1 页

<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 应用程序中使用路由器时，您会想要使用路由参数，查看动态路由 link here.

使用相同的例子：

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 构建反应性。

在你的情况下，你只需要通过简单地使用你的数据/方法来附加到你传递到路由器 link 的字符串，或者如果你需要更多的规则，你可以使用计算方法。这可能会变成或类似的东西：

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

Answer 2

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

我的工作路由器-link 第 1 页

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

我将 id（对齐方式）添加到我的 url 中 [:to="{ path: '/Pulse/Definition/'+'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 中通过路由器传递 ID-link

Passing ID through router-link in Vue.js

vuejs2

routerlink