Question

我无法加载组件。

我有一个带有抽屉的导航栏，它带有指向我的Web应用程序每个主页的路由。

到目前为止，我已经能够制作一个名为“ Weapons.vue”的页面，该页面显示了视频游戏中的武器类别列表（如Sniper Rifles和Handguns）。我使用“ data（）”传递名称，图像和路线。单击这些武器类别中的一个，v-btn将带我到一个显示该类别中武器的页面。在这个问题上，我将讨论“ Assault-rifles.vue”。

我遇到的问题是，每当我单击带有分配的路线的v-tn时，但是当我尝试在{{1}内执行相同的操作时，我都可以进入Assault-Rifles.vue页}页面，通过使用v-btn和指定的路线来获取特定武器，将把我带到一个空的组件。我指定的路径显示在URL中，但没有显示我的“ ADAR.vue”组件（ADAR是游戏中的一种武器）。

这是我的App.vue

Assault-rifles.vue

这是我的Weapons.vue（用户应从此处开始）。并未将所有数据添加到data（）中以节省空间。

<template>
  <v-app>
    <Navbar />
    <v-content class="mt-5--grey mx-5--grey black">
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

<script>
import Navbar from "@/components/Navbar";
export default {
  name: "App",
  components: { Navbar },
  data: () => ({
    //
  })
};
</script>

这是我的“突击步枪类别”页面（Assault-Rifles.vue）。再次删除一些数据以节省空间。

<template>
  <div class="mx-5 mb-5">
    <h1 class="green--text ma-5">Weapons</h1>
    <v-container class="my-5">
      <v-layout row wrap>
        <v-flex xs12 s6 m4 lg3 v-for="weapon in WeaponCat" :key="weapon.weapontype">
          <v-card class="text-md-center ma-3 grey darken-4">
            <v-responsive class="pt-4">
              <v-img contain :src="weapon.images"></v-img>
            </v-responsive>
            <v-card-title class="justify-center">
              <div class="heading font-weight-black white--text">{{ weapon.WeaponType}}</div>
            </v-card-title>
            <v-card-actions class="justify-center">
              <v-btn flat class="green black--text ma-3" :to="weapon.route">View Weapons</v-btn>
            </v-card-actions>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      WeaponCat: [
        {
          WeaponType: "Assault Rifles",
          images: "/WeaponCatimages/AR.png",
          route: "/weapons/Assault-Rifles"
        },
        .....
      ]
    };
  }
};
</script>

这是我的“ ADAR.vue”组件（不会渲染的组件）。

<template>
  <div class="mx-4 Armor">
    <h1 class="green--text ma-5">Assault Rifles</h1>
    <v-container class="my-5">
      <v-layout row wrap>
        <v-flex xs12 s6 m4 lg3 v-for="weapon in Weapon" :key="weapon.weapon">
          <v-card class="text-md-center ma-3 grey darken-4">
            <v-responsive class="pt-4">
              <v-img contain :src="weapon.images"></v-img>
            </v-responsive>
            <v-card-title class="justify-center">
              <div class="heading font-weight-black white--text">{{ weapon.Weapon}}</div>
            </v-card-title>
            <v-card-actions class="justify-center">
              <v-btn flat class="green black--text ma-3" :to="weapon.route">View Stats</v-btn>
            </v-card-actions>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Weapon: [
        {
          Weapon: "ADAR",
          images: "/WeaponIMG/AR/ADAR_2-15.png",
          route: "/weapons/Assault-Rifles/ADAR"
        },
        ....
      ]
    };
  }
};
</script>

这是我的route.js。太长了，所以我删除了一些东西...

<template>
  <div class="mx-4 ADAR">
    <h1 class="white--text">ADAR</h1>
  </div>
</template>

<script>
export default {};
</script>

我尝试了很多事情，例如更改是否出现“ /”和大写字母，但我似乎无法在任何地方找到答案。我希望对此有所帮助。

Answer 1

您的路线提示/Weapons/Assault-Rilfes/ADAR，请注意拼写错误Rilfes。

另外，您可能希望对整个URL使用小写字母，它看起来更整洁。

单击分配了路由的v-btn时，Vue组件未呈现

1 个答案: