Vue路由器-将对象作为道具通过查询传递给组件子对象

Question

我有一条动态路线，我想通过该路线作为道具传递三个物体之一。因此，如果用户按下显示“ dcsi”的链接，则具有所有属性的对象dcsi将被传递给子组件。

这是App.vue的根组件

<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" src="./assets/bg.png" green class="x">
        <v-list-item
          class="y"
          v-for="item in items"
          :key="item.unidade"
          :to="item.link"
          @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?q=ipe" },
      { unidade: "DCSI", link: "/dcsi?q=dcsi" },
      { unidade: "RT", link: "/rt?q=rt" }
    ],
    drawer: false,
    selectedMethod: "",

    unidade: "",
    dcsi: [
      {
        nome: xxxx,
        posto: xxxx,
        atributos: xxxx,
        ataque: xxxx,
        hp: xxxx,
        fraqueza:
          xxxx,
        img: require(xxxx)
      },
      {
        nome: xxxx,
        posto: xxxx,
        atributos:
          xxxx,
        ataque: xxxx,
        hp: xxxx,
        fraqueza: xxxx,
        img: require(xxxx)
      },
      {
        nome: xxxx,
        posto:xxxx,
        atributos:
          xxxx,
        ataque: xxxxx,
        hp: xxx,
        fraqueza:
          xxx,
        img: require(xxxx)
      }
    ],
    ipe: [
      {
        nome: xxxx,
        posto: xxxx,
        atributos: xxxx,
        ataque: xxxx,
        hp: xxxx,
        fraqueza:
        xxxx,
        img: require(xxxx)
      },
      {
        nome: xxxx,
        posto: xxxx,
        atributos:
       xxxxx,
        ataque: xxxx,
        hp: xxxx,
        fraqueza: xxxx,
        img: require(xxxx)
      },
      {
        nome: xxx,
        posto: xxxx,
        atributos:
          xxxx,
        ataque: xxxx,
        hp: xxxx,
        fraqueza:
         xxxx,
        img: require(xxxx)
      }
    ],
    rt: [
      {
        nome: xxxx,
        posto: xxxx,
        atributos: xxxx,
        ataque: xxxx,
        hp: xxxx,
        fraqueza:
   xxxx,
        img: require(xxxx)
      },
      {
        nome: xxxx,
        posto: xxxx,
        atributos:
          xxxx,
        ataque:xxxx,
        hp: xxxx,
        fraqueza: xxxx,
        img: require(xxxx)
      },
      {
        nome: xxxxx,
        posto: xxxxx,
        atributos:
         xxxx,
        ataque: "xxxx",
        hp: "xxxx",
        fraqueza:
          xxxxx,
        img: require("xxxxx")
      }
    ]
  }),
  methods: {
    change(val) {
      this.selectedMethod = val;
    }
  }
};
</script>
<style lang="stylus" scoped>
.x {
  position: absolute;
}

.y {
  color: green;
}
</style>

这是我的router.js

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: route => ({ query: route.query.q })
  },

];

const router = new VueRouter({

  mode: "history",
  base: process.env.BASE_URL,
  routes
});

//router.beforeEach((to, from, next) => {
// if (to.name === 'dcsi') {

// }
//})

export default router;

这是子组件uni.vue

<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: ["query"],
  mounted() {
    console.log(`routeQuery: ${this.$route.query.q}, queryProp: ${this.query}`);
    this.uni = this.query;
  }
};
</script>

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

到目前为止，在此查询中，我获取的是对象的名称，而不是对象本身，因此，当我加载子组件uni.vue时，它正在呈现该组件，但没有从父组件传递任何对象。 / p>