Vue-如何通过路由器链接将对象作为道具传递并在组件中访问对象

Question

我想基于用户激活的动态路由传递对象，并使用v-for在组件上对其进行访问以遍历该对象。

<template>
  <v-app>
    <v-app-bar app>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-spacer></v-spacer>
      <h1>{{selectedMethod}}</h1>
    </v-app-bar>
    <v-content>
      <router-view />
      <v-navigation-drawer v-model="drawer" class="x">
        <v-list-item
          v-for="item in items"
          :key="item.unidade"
          :to="item.link + item.params"
          @click="change(item.unidade)"
        >{{item.unidade}}</v-list-item>
      </v-navigation-drawer>
    </v-content>
  </v-app>
</template>

<script>
export default {
  name: "App",

  data: () => ({
    items: [
      { unidade: "IPE", link: "/ipe", params: this.ipe },
      { unidade: "DCSI", link: "/dcsi", params: this.dcsi },
      { unidade: "RT", link: "/rt", params: this.rt }
    ],
    drawer: false,
    selectedMethod: "",
    dcsi: [
      {
        nome: "xxxx",
        posto: "xxxx",
        atributos: "xxxx.",
        ataque: "12",
        hp: "76",
        fraqueza:
          "xxxxa",
        img: require("./xxxx.jpeg")
      },
      {
        nome: "xxxx",
        posto: "xxx",
        atributos:
          "xxxx",
        ataque: "1",
        hp: "732",
        fraqueza: "xxxx",
        img: require("./xxxx.jpeg")
      },
      {
        nome: "xxx",
        posto: "xxxx",
        atributos:
          "xxxx",
        ataque: "27",
        hp: "96",
        fraqueza:
          "xxxx",
        img: require("./xxxx.jpg")
      }
    ],
    ipe: [
      {
        nome: "xxxx",
        posto: "xxxx",
        atributos: "xxxx.",
        ataque: "12",
        hp: "76",
        fraqueza:
          "Qxxxx",
        img: require("./xxxx.jpeg")
      },
      {
        nome: "xxxx",
        posto: "xxxx",
        atributos:
          "xxxx",
        ataque: "1",
        hp: "732",
        fraqueza: "xxxx",
        img: require("./xxxxx.jpeg")
      },
      {
        nome: "xxxx",
        posto: "xxxx",
        atributos:
          "xxxx",
        ataque: "27",
        hp: "96",
        fraqueza:
          "xxxx",
        img: require("./xxxx.jpg")
      }
    ],
    rt: [
      {
        nome: "xxxxs",
        posto: "xxxx",
        atributos: "xxxx.",
        ataque: "12",
        hp: "76",
        fraqueza:
          "xxxxxx",
        img: require("./xxxx.jpeg")
      },
      {
        nome: "xxxx",
        posto: "xxxx",
        atributos:
          "xxxx",
        ataque: "1",
        hp: "732",
        fraqueza: "xxxx",
        img: require("./xxxx.jpeg")
      },
      {
        nome: "xxxx",
        posto: "xxxx",
        atributos:
          "xxxxx",
        ataque: "27",
        hp: "96",
        fraqueza:
          "xxxxx",
        img: require("./xxxx")
      }
    ],
    unidade: ""
  }),
  methods: {
    change(val) {
      this.selectedMethod = val;
    }
  }
};
</script>
<style lang="stylus" scoped>
.x {
  position: absolute;
}
</style>

在这里，我有一个App.vue，其中包含3个对象：ipe，dcsi和rt，我希望根据用户激活的动态路线作为道具传递。

import Vue from "vue";
import VueRouter from "vue-router";
import uni from "../components/uni.vue"
Vue.use(VueRouter);

const routes = [
  {
    path: '/:unidade',
    component: uni,
    props: true
  },

];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

这里index.js具有路由配置

<template>
  <div>
    <v-container>
      <h1>Coleção de monstros {{$route.params.unidade}}</h1>
      <v-layout row wrap>
        <v-flex xs12 sm6 md4 lg3 v-for="def in uni" :key="def.nome">
          <v-card class="text-xs-center ma-3">
            <v-img :src="def.img" class="img"></v-img>
            <v-card-title>{{def.posto}} {{def.nome}}</v-card-title>
            <v-card-title class="z">
              <div>
                <v-icon>mdi-sword</v-icon>
                {{def.ataque}}
              </div>
              <v-spacer></v-spacer>
              <div>
                <v-icon>mdi-shield</v-icon>
                {{def.hp}}
              </div>
            </v-card-title>
            <v-card-text>{{def.atributos}}</v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uni: ""
    };
  },
  props: ["dcsi"],
  mounted() {
    this.uni = this.props;
  }
};
</script>

<style lang="stylus">
.z {
  margin-top: -35px;
}
</style>

这里是我要访问提到的对象的组件。

到目前为止，我尝试将其传递给参数，但没有成功。

思想是单个组件，其呈现的对象是通过v-循环的不同对象，这取决于所选择的路线