在VueJS中，如何根据我的JS中填充的内容在视图中使用load？

Question

我是Vue.JS的新手，需要一些帮助，因为我坚持一些逻辑。 我已经获得了一个建设项目，因为我在NDA下，我只能展示比较代码示例。

在一个使用路由器进入应用程序视口的视图（Bars）中，我有一个简单的for循环。

<ul class="bar-listings">
  <li v-for="bar in bars">
      <router-link to="{bar.barPage}">
          <div class="item">
             <div class="item-bd">
                 <h2>{{ bar.barName }}</h2>
             </div>
          </div>
      </router-link>
  </li>
</ul> 

然后在我的JS文件中包含我的所有数据，我有这个（现在只有一个对象）

export default [
  {
    barName: "The Tropicana Bar",
    barPage: "views/bars/Tropicana",
  }
];

标题在Bars上正确显示，因此循环正确地提取数据。

但是，我将为每个条形图提供一个.vue文件，该文件也使用我的JS文件中的数据。 见下文：

<template>
    <div class="content-wrapper">
        <h1>{{ getBarByIndex({ bars, index }).barName }}</h1>
    </div>
</template>

<script>
import bars from "./../../data/bars";
export default {
  data() {
    return {
      bars: bars
    };
  },
  methods: {
  getBarByIndex({ bars = [], index = 0 }) {
    return bars[index] || {}
  }
}
};
</script>

所以我需要解决的是如何使<a v-bind:href="">加载此栏的视图？

Answer 1

我认为你可以做的是在你的组件中有一个子组件，你可以通过在路由器视图中使用嵌套路由来利用它，另外，你可以将道具作为对象传递给路由器组件，父或子，等等你需要。

基本上，您将拥有一个主路由器视图，但在组件内部，您将拥有另一个呈现子组件的路由器视图。

请参阅：嵌套路由

请参阅：将道具传递给路线组件