Question

我正在检查某人的代码。他们具有以下计算内容：

computed: {
        requireParams() {
            return {
                coach: this.coach,
                sid: this.sid
            };
        },
        coach() {
            return this.$route.params.coach || {};
        },
        sid() {
            return this.$route.params.sid || null;
        },
        avatar() {
            if (
                this.coach.profile_pic &&
                this.coach.profile_pic.indexOf("http") !== -1
            ) {
                return this.coach.profile_pic;
            } else {
                return "/images/_avatar.jpg";
            }
        }
}

现在，在html模板代码中，coach像这样多次被引用

<p class="name">{{coach.last_name}}{{coach.first_name}}</p>

谁能解释教练如何在路线中发送物体？我以为只能在/ path /：id这样的路由中发送字符串，就可以转换为/ path / 2，因此$ route.params可以给出{id：2}。

但是这里的教练在途中被访问了，这显然是一个对象吗？我不知道怎么可能

Answer 1

我不确定这是否是正确的方法，但是Vue允许您在路由器中传递对象。如果您有vuedevtools，则可以在vue $ route部分下查看：path，query，params，fullpath，name和meta。在参数中，我们可以发送对象。

例如，您的路线将如下所示：


const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about/:id',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

之后，我们创建一个按钮以在路线之间推送我们的数据。


<template>
  <div class="home">
   
   <button @click="sendObject">send my object</button>
    
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      myObj: {
        id: 1,
        name: "George",
        surname: "White",
        number: 123
      }
    }
  },
  methods: {
    sendObject() {
      this.$router.push({name: 'About', params: {id: this.myObj.id, comingItem: this.myObj}})
    }
  }
}
</script>

最后，让我们将物品放在其他路线上，如下所示：


<template>
  <div class="about">
    <h1>This is my object</h1>
    <div v-for="att in myItem" :key="att.id">
      <div> {{att}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "About",
  data() {
    return {
      myItem : null
    }
  },
  created() {
    this.myItem = this.$route.params.comingItem
  }
}
</script>

Dom将像：

1 乔治白色 123。

VueJS路由参数对象

1 个答案: